"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 https://i.sstatic.net/tORpt.png

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

Using Jquery to access Wcf service

Being unfamiliar with WCF services and coming from a Java background, I am seeking guidance on utilizing a specific WCF service at http://192.168.1.5/xeservices/AccountManagement.svc using jQuery and ajax. Unfortunately, I do not have access to .NET on m ...

jqueryajaxwcf

In Chrome, a horizontally floating item is pushed down, whereas in Firefox it remains in place

What is causing the last item in the submenu to be lower than the rest in Chrome, but aligned in Firefox? Check out this JSFIDDLE with font turned red for visibility View the ACTUAL SITE here I've experimented with padding, margin, vertical align, ...

htmlcssgoogle-chromefirefox

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

phpjavascripthtmlforms

$scope.apply is triggering both "catch" and "then" handlers

I am trying to ensure that the content of a page in Angular 1.6.2 and UI router is only displayed once it has been confirmed on the server that the user has the appropriate role/permissions. It seems like without using $scope.apply(), the catch() function ...

javascriptangularjsangularjs-1.6

The submission of the form using AJAX is currently experiencing issues

My current issue involves ajax not functioning as intended. I have a form that is being submitted through ajax to my php file for the purpose of updating my database. The database update is successful, but there seems to be a problem with the ajax function ...

javascriptphpjqueryajaxforms

AngularJS | Validate input values to ensure they fall within acceptable range for both arrow and user input types

I have a text input field where I need to limit the value between 1 and 20. Here is the HTML code snippet: <input type="number" class="form-control input-rounded" ng-model="Ctrl.new.runner" ng-change="Ctrl.newChangeAction(Ctrl.new)" ...

javascriptangularjserror-handlingcontrollerminmax

Creating a tab resizing effect similar to Chrome using only CSS

I am attempting to design tabs that can dynamically resize similar to how Chrome tabs behave. However, I am uncertain if achieving this functionality is possible without relying on JavaScript. Browser compatibility is not a concern for me; my main goal is ...

css

What is the proper way to safely escape a JSON string for an object that contains user-generated content?

How can I correctly use the variable s for the value-field of an option-element while escaping user input used for key and value? var key='highway'; var value='track'; var s = JSON.stringfy({ [key]:value }, undefined,''); s ...

javascripthtmljsonescapinguser-input

Is there a way to retrieve the fields of an index in elastic search?

After receiving a JSON object from an elastic search query, I successfully extracted the data using the code snippet below: $scope.results = response.hits.hits; console.log($scope.results); var resultstofilter = []; var resultArray = []; ...

javascripthtmljsonangularjs

Troubleshooting a Malfunctioning AJAX Request in a WordPress Plugin

After carefully reviewing this post about a jQuery Ajax call in a Wordpress plugin page, I found that it closely matched my current issue. My basic Wordpress plugin is designed to offer a specific membership form that passes payment details to PayPal for p ...

javascriptphpjqueryajaxwordpress

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

After implementing a minimal carousel, I discovered that it functions perfectly with 3 or more slides. However, as soon as I remove some slides, issues start to arise. Some of the problems I encountered include: The sliding animation is removed on ' ...

javascriptjqueryhtmlcss

Unusual div image alignment when dimensions are dynamically adjusted with Javascript animations

I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...

javascripthtmlcssanimation

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

javascriptjquery

Success/Fail Page for Form Redirect

I've been struggling to figure out how to redirect my form to a success or fail page. I've scoured the internet for solutions, looking into traditional form redirects and even JavaScript onClick redirects. Can someone guide me on adding a redirec ...

javascriptphpjqueryhtmlhttp-redirect

Using Ajax with Laravel

Currently, I am attempting to utilize Ajax in Laravel in order to display search results in the "search_results_div" div without requiring the user to navigate away from the page. Unfortunately, I have encountered the following error message: "Column not ...

javascriptjqueryajaxlaravel-4

One creative method for iterating through an array of objects and making modifications

Is there a more efficient way to achieve the same outcome? Brief Description: routes = [ { name: 'vehicle', activated: true}, { name: 'userassignment', activated: true}, { name: 'relations', activated: true}, { name: &apos ...

javascriptfunctiontypescript

Discovering details regarding cookies established by an external domain

Is it possible to retrieve the host address of the domain that created a cookie on my webpage? Here is the scenario I am facing: I am on "domain A" and have a script linked from "domain B". A method on "domain B" sets a cookie on my "domain A". How can ...

javascriptcookies

Error message: Unable to assign value to 'kind' property as it is undefined in Angular Webpack application

Unexpectedly, my Angular application is encountering an error during the build process. TypeError: C:\Users\c\dev\privacy\node_modules\@fortawesome\angular-fontawesome\fesm2020\angular-fontawesome.mjs: Cannot se ...

javascriptangularwebpack