CODEWITHSUNDEEP
htmljquerylistanchor
j00m
j00m

Reputation: 501

Highlight nav section on scroll

I have a fixed side nav which jumps to certain points in the content which runs along side it.

I have no control over this mark-up. I need to add an active class onscroll depending on which section of the document the page is scrolled to:

 <div id="fixed-side-nav">
 <ul>
 <li><a id="linkSec001" onclick="scrollToSection('Sec001')" href="#">Link to section one</a></li>
 <li><a id="linkSec002" onclick="scrollToSection('Sec002')" href="#">Link to section two</a></li>
 <li><a id="linkSec003" onclick="scrollToSection('Sec001')" href="#">Link to section Three</a></li>
 </ul>
 </div>

The content is structured as follows:

 <div id="content">
   <h2 id="Sec001">Section One</h2>
   <!--CONTENT HERE-->
   <h2 id="Sec002">Section One</h2>
   <!--CONTENT HERE-->
   <h2 id="Sec003">Section One</h2>
   <!--CONTENT HERE-->
</div>

The problem is these IDs can vary in name and also in amount. So the solution needs to be flexible enough for this.

I hope that is clear...

** UPDATE **

I am trying the following:

 jQuery(window).on('load scroll resize', function (){   
// Assign active class to nav links while scrolling
var scrollDistance = jQuery(window).scrollTop();    
jQuery('#timelineFulltext h2').each(function(i) {
    if (jQuery(this).position().top <= scrollDistance) {
        jQuery('.fixed-timeline li.active').removeClass('active');
        jQuery('.fixed-timeline a').eq(i).parents('li').addClass('active');
    } 
})

});

This works well when the headings are well spaced out but when you get lots of headings close together it doesn't work very well.

Upvotes: 1

Views: 1725

Answers (2)

j00m
j00m

Reputation: 501

I got this to work by doing the following:

 jQuery(window).on('load scroll resize', function (){   
// Assign active class to nav links while scrolling
var windowTop = jQuery(window).scrollTop();
jQuery('h2').each(function (index, elem) {
    var offsetTop = jQuery(elem).offset().top;
    var outerHeight = jQuery(this).outerHeight(true);

    if( windowTop > (offsetTop - 110) && windowTop < ( offsetTop + outerHeight)) {
        var elemId = jQuery(elem).attr('id');
        jQuery('.fixed-side-nav li.active').removeClass('active');
        jQuery('.fixed-side-nav a.'+elemId).parents('li').addClass('active');
    }
});

});

Upvotes: 0

Dinesh s
Dinesh s

Reputation: 377

Add the Active class to the list like mentioned below

<ul>
  <li><a class="active"  href="#Sec001">Link to section one</a></li>
  <li><a  href="#Sec002">Link to section two</a></li>
  <li><a  href="#Sec003">Link to section Three</a></li>

Add a css to list active to highlight when active

.fixed-side-nav .active{
  color:'red'
 }

Add Jquery to make active on scroll

!(function($) {
   // Smooth scroll for the navigation menu and links with .scrollto classes
   var scrolltoOffset = $('#header').outerHeight() - 1;
   $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
   if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && 
   location.hostname == this.hostname) {
   var target = $(this.hash);
   if (target.length) {
    e.preventDefault();

    var scrollto = target.offset().top - scrolltoOffset;

    if ($(this).attr("href") == '#header') {
      scrollto = 0;
    }

    $('html, body').animate({
      scrollTop: scrollto
    }, 1500, 'easeInOutExpo');

    if ($(this).parents('.nav-menu, .mobile-nav').length) {
      $('.nav-menu .active, .mobile-nav .active').removeClass('active');
      $(this).closest('li').addClass('active');
    }

     if ($('body').hasClass('mobile-nav-active')) {
       $('body').removeClass('mobile-nav-active');
       $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
       $('.mobile-nav-overly').fadeOut();
     }
     return false;
   }
 }
});
})(jQuery);

1.change this script according to your html
2.The scroll to function is to make active the nav-bar when scrolled to particular section

Upvotes: 1

Related Questions