我有一个固定的侧面导航,它会跳到侧面的内容中的某些点。
我无法控制此加价。我需要根据页面滚动到文档的哪一部分来添加活动类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');
}
})
});
当标题间距适当时,此方法效果很好,但是当您将很多标题紧密排列在一起时,效果将不佳。
我通过执行以下操作来使它起作用:
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] 删除。
我来说两句