"Scrolling with Bootstrap Scroll Spy is causing incorrect sections to be

Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one.

Here is the code snippet:

Content:

<body style="heigt: 100%" data-spy="scroll" data-target="#side-menu">
    <div class="container-fluid">
      <div class="row">
        <nav id="side-menu" class="col-xs-3 bs-docs-sidebar" data-gumshoe-header>
            <ul class="nav nav-stacked fixed" data-gumshoe>
                <li>
                    <a href="#GroupA">Group A</a>
                </li>
                <li>
                    <a href="#GroupB">Group B</a>
                </li>
                <li>
                    <a href="#GroupC">Group C</a>
                </li>
            </ul>
        </nav>
        <div class="col-md-9">
          <div id="GroupA">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <br><br><br><br><br><br><br><br><br>
    <div id="GroupB">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <br><br><br><br><br><br><br><br><br>
    <div id="GroupC">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
    </div>
        </div>
      </div>
    </div>
</body>

// Edit: View the page screenshot

I am currently using Bootstrap 3.3.7 and JQuery 2.2.4.

Thank you!

javascriptjquerycsstwitter-bootstrap

Answer №1

The element being scrolled should have the position: relative style applied to it.

Reference: http://getbootstrap.com/javascript/#requires-relative-positioning

Update

Your div's height is too small, causing the scroll area to be too short for scroll-spy functionality.

See working example here: https://jsfiddle.net/o93q4maf/

Update 2

As pointed out by @Lars, the issue was a typo in the body element's style attribute: style="heigt: 100%" instead of style="height: 100%".

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

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

javascriptphpjqueryhtmlajax

Forwarding requests via middleware in next.js 13 AppDir: true

I am currently working on implementing a redirect feature in next.js 13 when the jwt back-end is not received. This is being done with the appdir activated. This is the code in my middleware.ts file: import { NextResponse } from 'next/server' im ...

javascriptnext.jsnext.js13

Can you confirm the mobile type, please? Using JavaScript to display a div only once based on the mobile type

Is there a correct way to determine the type of mobile device I'm using? Are there alternative methods to check for the mobile type? Take a look at my approach in the code below. How can I test this using a tool? Does anyone have insights on checki ...

javascriptjqueryhtmljquery-pluginsdom-events

Capture latitude and longitude using HTML5 Geolocation and store the values in a PHP variable

In the midst of a project, I am tasked with obtaining the longitude and latitude of a user in order to pinpoint their location. The challenge lies in storing this data in PHP variables, which will ultimately be saved in a MySQL database. Can anyone offer ...

javascriptphpmysqlhtmlgoogle-maps

What could be causing a functional component's child component to be using stale props?

I am currently working with Next JS, but the process is similar. I have refined the code and eliminated irrelevant parts. My goal is to create a form where new fields (child components) can be added dynamically. The default setting will be 1 field, with a ...

javascriptreactjsnext.js

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

view the document and my packages (image) Although it worked with the cdn, I'm puzzled why I can't use it properly with the cli ...

htmlcssnpmtailwind-csstailwind-ui

Is AJAX.call functioning properly in every browser except for Firefox?

I encountered an issue with an ajax load in Firefox. Every time I try to load, I keep receiving a message that says 'unreachable code after return statement'. Despite my efforts to find a solution, I have not been successful in resolving it. Inte ...

javascriptajax

generating a new item using Mongoose searches

How can I generate an object based on queries' results? The table in the meals operates using database queries. How do I handle this if the queries are asynchronous? const getQueryResult = () => { Dinner1300.count().exec(function (err, count) ...

javascriptnode.jsmongodbexpressmongoose

Is there a way to dynamically adjust the modal header based on the chosen option?

Discussing the following inquiry: Passing data to Bootstrap 3 Modal Typically, the data-id is transferred to a text box in various scenarios by using this line: <input type="text" name="bookId" id="bookId" value="" /> Is there a way to send the da ...

jqueryhtmltwitter-bootstrap

Handing off the Event Object to a Function in JQuery

Usually, I'm able to send an event to a nameless Jquery function like this: $(".click_me").on("click", function(e) { e.preventDefault(); }); But what if I want to eliminate the anonymous function and still pass the event to it: function onClickMe ...

jqueryfunctionparameters

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

Enhance Your Tables with JQuery Calculations

I have a table that is populated from a database. Each field in the table is hidden until it is selected from a dropdown list. I also need to calculate the total of only the visible rows, not all rows including hidden ones. Can you please advise on how I c ...

javascriptjquery

Prevent selection of future dates in JavaScript by using the user's chosen StartDate

Here is the code I currently have: var today = new Date().toISOString().split('T')[0]; document.getElementsByName("StartDate")[0].setAttribute('min', today); $('#StartDate').change(function myfunction() { var endDate = ...

javascriptjquery

When executing class methods, Ember.js encounters errors stating "method does not exist."

I am facing a situation where I need to trigger a model reload when a user clicks a refresh button. In the past, I successfully implemented this with Ember-Model. However, since migrating to Ember-Data, I am encountering an error when attempting to execute ...

javascriptember.jsember-data

Access denial encountered when attempting to submit upload in IE8 using JavaScript

When running the submit function on IE8, I am receiving an "access is denied" error (it works fine on Chrome and Firefox for IE versions above 8): var iframe = this._createIframe(id); var form = this._createForm(iframe, params); ... ... ...

javascriptjqueryinternet-explorer-8

Issue with Spring MVC: 404 error when making an ajax POST request

I have been attempting to send an HTTP POST request to a Spring controller with a JSON array, but I keep receiving a 404 response. Despite referring to various tutorials including: SpringMVC Ajax validation Parsing JSON in Spring MVC using Jackson JSON P ...

jqueryajaxjsonspringspring-mvc

After making the request, $.getJSON initially comes back as undefined but eventually delivers

I found myself in a sticky situation. I was working on coding a Wikipedia search tool for a personal project, but encountered a small glitch. When a user types a word into the search bar, it gets stored in the data parameter of $.getJSON. The response then ...

javascriptjqueryajax

Issues with data within a Vue.js pagination component for Bootstrap tables

Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error: <table result="[object Object],[object Object],[object Ob ...

javascripthtmlcssvuejs2bootstrap-vue

Notifying a Child Component in React When a Props-Using Function Resolves a REST Call

When I submit an item or problem, I trigger a function in the parent component that has been passed down to the child component as props. After sending my information, I want to clear the input fields. The issue is that I am clearing the input fields immed ...

javascriptreactjs

Sending a Php request using AJAX and receiving JSON values

Trying to retrieve values from PHP using AJAX Post. I've researched and found that JSON dataType should be used, but encountering an error: "SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 72 of the JSON d ...

phpjqueryarraysjsonajax