用jquery实现楼层滚动对应导航高亮

html 结构排版：

// 定位到页面左侧或者右侧

<div class="nav">

<ul id="menu-list">

<li><a href="#one" class="links one">Menu 1</a></li>

<li><a href="#two" class="links two">Menu 2</a></li>
<li><a href="#three" class="links three">Menu 3</a></li>
<li><a href="#four" class="links four">Menu 4</a></li>
<li><a href="#five" class="links five">Menu 5</a></li>
<li><a href="#six" class="links six">Menu 6</a></li>
</ul>
</div>

// 页面顶部的其它内容块

<div class="other-content"> 这里是其它的内容，假设内容高度为300px</div>

// 页面与导航对应的内容块
<div id="wrapper">
<div id="one" class="container">one</div>
<div id="two" class="container">two</div>
<div id="three" class="container">three</div>
<div id="four" class="container">four</div>
<div id="five" class="container">five</div>
<div id="six" class="container">six</div>
</div>

js效果实现：

/*
菜单－内容块对应

利用锚点链接的原理，所以导航的a标签的href= # + 对应内容块的ID
为了设置对应导航高亮，为了方便起见，导航的class需要与对应内容块的ID保持一致
如果楼层上面有头部等其他内容需要判断currentScroll 的值是否大于上面其它内容块的高度，否则执行这一步（var id = $currentSection.attr('id')）的时候会报错
*/

$(window).scroll(function(){

var $sections = $('.container'); // 获取所有的内容块
var currentScroll = $(this).scrollTop(); // winodw滚动的高度
var $currentSection ; // 当前内容块
$sections.each(function(){
var divPosition = $(this).offset().top; // 获取到当前内容块具体页面顶部的距离
if( divPosition - 1 < currentScroll){ // 通过条件判断匹配到当前滚动内容块
$currentSection = $(this);
}

　　　　// 如果楼层最上端有其它的内容快需要加一个判断

　　　　if(currentScroll > 300){

　　　　　 var id = $currentSection.attr('id');
$('.links').removeClass('menu-active');
$("."+id).addClass('menu-active');

　　　　}

})

});

</script>

文章来源：http://caibaojian.com/higlight-nav-link.html

巴特西

用jquery实现楼层滚动对应导航高亮

最新文章

热门文章