Scrollspy in Twitter Bootstrap consistently highlights the final element

I'm struggling to understand why only the final section is being highlighted when scrolling. Can you help?

<body data-spy="scroll" data-target="#homeToolbar" data-offset="50">
  <nav class="navbar navbar-default navbar-fixed-top" id="homeToolbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Testing</a>
      </div>
      <div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav pull-right">
            <li><a href="#section2">Home</a></li>
            <li><a href="#section3">Product</a></li>
            <li><a href="#section4">Team</a></li>
            <li><a href="#section5">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</body>
jqueryhtmlcsstwitter-bootstrap

Answer №1

Check out this functional demo

Experiment with utilizing the .affix feature along with an offset and applying the .page-scroll class to the scrolling element.

Your JQuery script should resemble something similar to the code provided below (based on the mentioned demo)

//jQuery for page scrolling functionality - requires jQuery Easing plugin
$(function() {

// jQuery for page scrolling functionality - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: ($($anchor.attr('href')).offset().top - 50)
    }, 1250, 'easeInOutExpo');
    event.preventDefault();
});

// Highlight the top navigation bar as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
});

// Close the Responsive Menu when a menu item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
    $('.navbar-toggle:visible').click();
});

// Offset for Main Navigation 
$('#mainNav').affix({
    offset: {
        top: 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

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...

javascripthtmlinternet-explorerouterhtml

Utilizing HTML templates in Express instead of Jade

Currently in the process of setting up a new MEAN stack project, with Angular as my chosen front-end framework. I am aiming to utilize HTML files for my views in order to incorporate Angular within them. However, I am facing challenges when attempting to s ...

javascripthtmlangularjsnode.jsexpress

Enhancing Kendo Grid with Checkbox Columns

I am facing a situation with my kendo grid where I need to insert two checkbox columns in addition to the existing set of columns. <script id="sectionPage" type="text/kendo-tmpl"> @(Html.Kendo().Grid<SectionPageModel>() .Na ...

javascripthtmlasp.net-mvckendo-uikendo-grid

How can I open links inside a .load jquery page without refreshing the page?

I have successfully implemented a jQuery code that updates the search query when I click on a checkbox. However, I am facing an issue with pagination on the loaded page. Whenever I click on the next button or any pagination links, the page refreshes and th ...

jqueryajaxpagination

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

cssmenu

What is the best way to make my navbar adjust seamlessly to accommodate the largest element?

Currently, I'm facing an issue where my logo is not fitting properly inside my navbar and it's "falling out." You can see the problem here: https://i.sstatic.net/l4T1B.png Here is the relevant code: HTML: <nav class="container-fluid navbar ...

htmlcsstwitter-bootstrap

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

jqueryhtmljquery-mobilecordova

Ways to incorporate design elements for transitioning focus between different elements

When focusing on an element, I am using spatialNavigation with the following code: in index.html <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5acf2acafbeabb6beb3f2b1bea9b6 ...

javascripthtmlcssreactjssass

"Step-by-step guide on placing an order for the button

I am currently working with material-ui and encountering a roadblock. My goal is to design a homepage for a dashboard where the various services are listed. I am attempting to organize these 6 buttons into 2 rows and 3 columns, totaling 6 buttons in all. A ...

cssmaterial-ui

The elements on the webpage adjust their dimensions accordingly when zooming in or out

I have been facing an issue with the menu width on my webpage. When I zoom in and out, the width of the menu keeps changing. This problem only occurs in browsers other than IE. I have checked for fixed positioning but it appears to be using relative positi ...

htmlcsszoomingpositioning

Displaying leap years and non-leap years in distinct tables

I attempted to organize the display of leap years and non-leap years from 1991 to 2100 into two separate tables, but unfortunately, I was unsuccessful. Could you kindly offer guidance on how to present this information in a table format or a grid system? ...

phphtmlcssbootstrap-modalleap-year

How to assign a value to a textarea element in an HTML form?

I am struggling to populate a text area with the value using this code snippet... <?php $message = $_REQUEST['message']; ?> <br/><b>Description</b><br/> <TEXTAREA NAME="message" COLS=40 ROWS=6 value="<?=$messa ...

phphtml

The nodejs https website is unable to render in Internet Explorer 11

Our secure website is not loading in IE11 (dnserror.html - page cannot be displayed). However, it works perfectly fine on all other browsers! The webserver we are using is a node.js app with default cipher settings. The SSL certificate is valid and enhan ...

htmlnode.jssslhttpsinternet-explorer-11

Click-o-Meter: Tracking Button Presses

I’m looking to develop a button click counter that increases every time it is downloaded. I want to implement this functionality without using a database. Here's the code snippet: <?php $counterFile = 'path/to/counter.txt' ; ...

javascriptphpjqueryajax

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

javascriptjqueryhtmlcssmouseover

Having trouble locating the function in one of the included JavaScript files when receiving an Ajax response?

I have implemented jquery tabs that initiate an ajax call when a tab is clicked. When the tab is clicked, it triggers the ajax call to fetch the HTML response and then appends it to the current page. However, I am encountering an issue; Within the ajax re ...

jqueryajaxjquery-uijquery-tabs

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

javascripthtmlfirebasegoogle-cloud-firestore

exploring the digital archives for a specific song file on the computer

Currently in the process of building a website, and I am looking to incorporate a search and filter feature for all music content so that users can play it on my player. Wondering if this is possible? Seeking some assistance and creative ideas to make thi ...

phpjavascriptjqueryajaxjquery-plugins

Tips for resolving issues with the navigation menu not appearing on the website

For more information, please visit the webpage at I am facing an issue where the dropdown menu does not show up when hovering on the Services page. The dropdown menu was created in WordPress using wp_nav_menu. There are 5 pages, including a Services page ...

csswordpressdrop-down-menubootstrap-4navigationbar

When the Angular script is executed, the variable is not defined

One of my custom directives receives an object named 'vm' in its scope, which contains a property/value pair (ccirCategoryIncidentI : 3) that I need to access. When I try to log this value with console.log(scope.vm.ccirCategoryIncidentI), it init ...

javascriptjqueryangularjsd3.jsnvd3.js