Having issues with Bootstrap affix functionality malfunctioning

I recently put together documentation using the CSS and JavaScript from Bootstrap docs. Here is a snippet of the sidebar code in my documentation:

<div class="col-md-3 docs">
    <div class="bs-docs-sidebar">
        <ul class="nav docs-sidebar-nav">
            <li class="active">
                <a href="#one">One</a>
            </li>
            <li>
                <a href="#two">Two</a>
            </li>
        </ul>
    </div>
</div>

Additionally, here is the jQuery code for .affix:

$(document).ready(function () {            
    $('.bs-docs-sidebar').affix({ offset: { top: 290 } })
})

However, upon opening the page, I noticed that the sidebar does not display entries "One" and "Two" correctly. As I scroll down, the sidebar only shows "Two" as active but never displays entry "One."

I am currently using Bootstrap v3.2.0. Can someone explain why the sidebar is not functioning properly with .affix? I even attempted to use data-spy=affix, but that didn't solve the issue.

Does anyone know how to fix this problem and make the sidebar work seamlessly with affix?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you want to implement the affix feature, simply include the following code:

$(".bs-docs-sidebar").affix({ offset: { top: 60 } });

As you scroll, this will apply one of these classes to your element:

  • .affix-top
  • .affix
  • .affix-bottom

You can then customize the styling for the element with the .affix class by setting its height like this:

.bs-docs-sidebar.affix {
    top: 20px;
}

Check out a functional demo on jsFiddle that uses Affix on the BS sidebar

If you're struggling with scrollspy and how bootstrap styles .active items, take a look at this helpful blog post that guides you through setting up a side navigation bar similar to twitter bootstrap's (written by me).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve all elements from an array that have the highest frequency of occurrence

Consider an array like [1,4,3,1,6,5,1,4,4]. The element with the highest frequency in this array is 3. The goal is to select all elements from the array that have a frequency of 3, so in this case we would select [1,4]. To achieve this, one possible meth ...

javascriptarrays

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

javascriptjqueryhtmllocal-storage

Tips for incorporating a variable into an action link for HTML and Flask

I am completely new to using Flask and HTML. Currently, I am working on developing a user management tool that includes buttons to perform various actions within Flask. One of the functionalities I am trying to implement is a button that allows users to ...

pythonhtmlflask

Streaming live video on the website

Hi there! I'm looking to integrate live video capturing into an HTML/JavaScript site for a presentation. However, I'm not sure where to start my search. Can anyone point me in the right direction? :) The live video will be captured by a camera o ...

javascripthtmllivebroadcast

Having trouble sending a request in next.js with Docker during the build process?

When utilizing the getStaticProps function to send a request to my backend API from another Docker container, I am encountering an issue. Despite ensuring that the API URL is accurate, the static page fails to be created. This is due to the requirement for ...

javascriptdockerdocker-composedockerfilenext.js

Error: Unable to process reduction on ships - function "reduce" is not functional

I created a boat visualization tool using a specific API. The API responds with a JSON that I then inject into a table. The issue: At times during the day, I observed the application would abruptly stop functioning and throw an error: Unhandled Rejection ...

javascriptnode.jsreactjs

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

javascriptjqueryhtmlcss

Having trouble with Material UI ListItem and setting a custom key prop

While using Material UI for React, I encountered an issue when attempting to pass a key prop to a ListItem: A warning popped up stating that key is not a valid prop. Trying to access it results in undefined. If the same value is needed within the child ...

javascriptreactjsmaterial-ui

Is it just me, or does floating right not seem to work on 404 pages?

I have been working on setting up a unique header and footer design for a client's website. You can check it out here: Everything is looking good with the social media links floating to the right on all pages, except for some reason on the 404 error ...

css

I need clarification on the following: content:''

I have a question regarding this particular code snippet .store { display: block; position: relative; } .store:before, .store:after { display: block; position:absolute; content:''; } .store:before { background: url(store-before.png); ...

csscss-content

What is the best way to divide a GraphQL schema to avoid circular dependencies?

I have a question that is similar to the issue of circular dependency in GraphQL code discussed on Stack Overflow, but my problem lies within JavaScript (ES6). The size of my schema definition has become too large, and I am struggling to find a way to bre ...

javascriptgraphql

"An issue has been identified where the ui.bootstrap.accordion component is not functioning correctly

I struggled to implement the accordion feature from https://angular-ui.github.io/bootstrap/#!#accordion. After countless attempts with bootstrap version 4.0.0, I switched to 3.0.0 and finally achieved the desired results. Version 4 displayed only a clickab ...

angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-4angular-ui

Displaying a partial template along with another object

Here is the code snippet from my controller method: def update @properties = Property.all @user = User.all respond_to do |format| format.js { render partial: 'property_all' } end end I am wondering if it's possible to render a ...

jqueryruby-on-railsajaxruby-on-rails-3

JavaScript - Separate Artist and Title

In the code snippet below, I am using a Parser script to extract metadata from a live streaming radio station: const Parser = require('../src'); const radioStation = new Parser('http://stream.com/live_32.aac'); radioStation.on(' ...

javascriptnode.jssplitseparator

Once the recursive function executes (utilizing requestAnimationFrame), socket.emit can finally be triggered

My current issue involves sending an array to my server from the client side using a recursive function, but the responses from the server are delayed and only arrive after the recursive function completes. I'm uncertain whether the problem lies with ...

javascriptnode.jsangularexpresssocket.io

Tips for updating the color of table data when the value exceeds 0

I'm currently working on developing a transaction table that is intended to display debit values in red and credit values in green. However, I would like these colors to only be applied if the value in the table data is greater than 0 via JavaScript. ...

javascripthtmlcss

Looks like an error has occurred: "Swal has not been defined"

I'm currently working on a small project that involves using CodeIgniter, VueJs, and the Sweet Alert Javascript library. However, I encountered an error in my console stating ReferenceError: "Swal is not defined" when I try to call swall.fire({}) with ...

javascriptvue.jsvuejs2sweetalert

Occupying room while using display: none in <td>

As a newcomer to media queries and .net, I find myself struggling with the code below. At max-width 775px, my goal is to have the first td disappear completely and be replaced by the second td. However, it seems that while the first td becomes 'invisi ...

htmlcssrazor

Best practices for implementing dual ngFor directives within a single tr element?

Click here to view the page The image attached shows the view I want to iterate through two ngFor loops inside the tr tag. When using a div tag inside the tr, it's looping the button next to the tag instead of where I want it in the file table header ...

htmlangulartypescriptuser-interfaceangular-material

Error in TypeScript: The property 'data' is not found within type '{ children?: ReactNode; }'. (ts2339)

Question I am currently working on a project using BlitzJS. While fetching some data, I encountered a Typescript issue that says: Property 'data' does not exist on type '{ children?: ReactNode; }'.ts(2339) import { BlitzPage } from &q ...

javascriptreactjstypescriptnext.jsblitz.js