一、效果图
二、实现原理
页面滚动事件监听滚动距离,当到达导航栏对应地区域时,导航栏地颜色变化
三、具体代码
/* 滚动后导航栏显示当前所在区域 */$(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":""});//将其他导航选项取消样式};});});
如果觉得《jq实现导航栏选项跟随滚动条颜色变化》对你有帮助,请点赞、收藏,并留下你的观点哦!