jq实现导航栏选项跟随滚动条颜色变化

一、效果图

二、实现原理

页面滚动事件监听滚动距离，当到达导航栏对应地区域时，导航栏地颜色变化

三、具体代码

/* 滚动后导航栏显示当前所在区域 */$(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":""});//将其他导航选项取消样式};});});