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

j00m

我有一个固定的侧面导航,它会跳到侧面的内容中的某些点。

我无法控制此加价。我需要根据页面滚动到文档的哪一部分来添加活动类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');
    } 
})

});

当标题间距适当时,此方法效果很好,但是当您将很多标题紧密排列在一起时,效果将不佳。

j00m

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

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

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在滚动条上突出显示当前部分-部分之间的间隙

来自分类Dev

滚动条上的粘性导航栏

来自分类Dev

滚动条上的锚点突出显示在Firefox中不起作用

来自分类Dev

滚动条上的突出显示菜单项不起作用

来自分类Dev

UITableVIewController在滚动条上显示文本

来自分类Dev

协助在JTextArea上显示滚动条?

来自分类Dev

使用Headroom JS隐藏滚动条上的导航栏并在需要时显示

来自分类Dev

使用Headroom JS隐藏滚动条上的导航栏,并在需要时显示

来自分类Dev

底部导航在滚动条上隐藏Recycler视图问题

来自分类Dev

动态更改滚动条上的导航栏颜色

来自分类Dev

导航栏不会隐藏在滚动条上

来自分类Dev

底部导航在滚动条上隐藏Recycler视图问题

来自分类Dev

导航条在滚动条上的其他导航条下方

来自分类Dev

滚动条部分隐藏

来自分类Dev

QTableWidget显示滚动条

来自分类Dev

在窗口滚动条上显示/隐藏div

来自分类Dev

CSS固定元素显示在滚动条上

来自分类Dev

隐藏仅在Windows上显示的无用滚动条

来自分类Dev

如何在div上显示滚动条?

来自分类Dev

iframe上的滚动条在Chrome中不显示动画

来自分类Dev

在水平滚动条上显示固定宽度的顶部栏

来自分类Dev

在窗口滚动条上显示/隐藏div

来自分类Dev

在滚动条上更改div(隐藏/显示)

来自分类Dev

平板电脑上不显示滚动条

来自分类Dev

Visual Studio是否可以在滚动条中标记突出显示的变量/函数的实例?

来自分类Dev

粘性顶部导航创建滚动条

来自分类Dev

引导导航栏与滚动条合拢

来自分类Dev

垂直导航栏移动到网站的其他部分/删除滚动条

来自分类Dev

在滚动条上显示滚动条,否则将其隐藏,保持其z-index优先

Related 相关文章

热门标签

归档