在滚动条上突出显示导航部分

Question

我有一个固定的侧边导航，可以跳转到旁边的内容中的某些点。

我无法控制这个 mark-up。我需要根据页面滚动到文档的哪个部分添加一个活动的 class onscroll：

 <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>

内容结构如下：

 <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>

问题是这些 ID 的名称和数量可能不同。因此解决方案需要足够灵活。

我希望清楚...

** 更新 **

我正在尝试以下操作：

 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');
    } 
})

});

当标题间隔良好时，此方法效果很好，但当您将许多标题靠得很近时，效果就不太好。

Answer 1

将活动 class 添加到如下所述的列表中

<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>

在活动列表中添加一个css以在活动时突出显示

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

添加 Jquery 以在滚动时激活

!(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这个脚本根据你的html
2.The滚动到功能是在滚动到特定部分时激活导航栏

Answer 2

我通过执行以下操作使它起作用：

 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');
    }
});

});

在滚动条上突出显示导航部分

Highlight nav section on scroll

html

anchor

jquery

list