一、效果图
二、实现原理
页面滚动事件监听滚动距离,当到达导航栏对应地区域时,导航栏地颜色变化
三、具体代码
/* 滚动后导航栏显示当前所在区域 */
$(window).scroll(function(){//监听窗口滚动事件
var scrollTop = $("html").scrollTop();//获取当前位置到页面顶部的距离
$("nav a").each(function(index,element){//遍历导航栏选项
if($(element.hash).offset()&&scrollTop>=$(element.hash).offset().top-300){//判断当前位置是否为导航栏对应区域
$(this).css({"background":"#D23217","color":"white","border":"1px solid #000000","box-shadow":"inset 0 0 1px #db5f4c,inset 0 1px 1px #f18a75"});//将导航栏选项设置样式
$(this).siblings().css({"background":"white","color":"black","border":"0 solid #000000","box-shadow":""});
//将其他导航选项取消样式
};
});
});