跟随内容定位的高亮悬浮导航显示

跟随内容定位的高亮悬浮导航显示（类似于锚点）

这是简略的样式

<style>* {margin: 0;padding: 0;}.fixnav {position: fixed;left: 10px;top: 100px;display: none;}.fixnav li {list-style: none;width: 80px;height: 45px;line-height: 45px;text-align: center;color: #fff;background: #ccc;cursor: pointer;}.fixnav li.current {background: #d36512;}.head {width: 100%;height: 200px;background: seagreen;margin-bottom: 20px;text-align: center;font-size: 50px;line-height: 200px;color: #fff;}.wrap .w {width: 100%;height: 650px;line-height: 600px;font-size: 60px;font-weight: 600;text-align: center;color: #fff;margin-bottom: 20px;}
style>

这是结构部分

<div class="fixnav"><ul><li class="current">导航1li><li>导航2li><li>导航3li><li>导航4li><li>导航5li>ul>div><div class="head">头部div><div class="wrap"><div class="one w">第一个大模块div><div class="two w">第二个大模块div><div class="three w">第三个大模块div><div class="four w">第四个大模块div><div class="five w">第五个大模块div>div>

最后引入js代码（本例是用offset().top来定位的）

<script>
$(function() {var scrolloneTop = $(".one").offset().top;//节流阀 互斥锁flag = true;toggleScroll();function toggleScroll() {if ($(document).scrollTop() >= scrolloneTop) {$(".fixnav").fadeIn(1000);} else {$(".fixnav").fadeOut();}}$(window).scroll(function() {toggleScroll();//页面滚动到哪个模块范围时对应的固定导航也要显示当前状态//判断条件：scrollTop的值大于等于 内容区域里的每个模块的offset().top;if (flag) {$(".wrap .w").each(function(i, ele) {if ($(document).scrollTop() >= $(ele).offset().top) {$(".fixnav li").eq(i).addClass("current").siblings().removeClass();}});}});$(".fixnav li").click(function() {flag = false;var currentTop = $(".wrap .w").eq($(this).index()).offset().top;$("body, html").stop().animate({scrollTop: currentTop}, function() {flag = true;});$(this).addClass("current").siblings().removeClass();});
});
script>

至此，一个简单的跟随内容而高亮的导航就做好了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！