滚动条滚动点亮对应导航
Posted shanshanjiadexiaohai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条滚动点亮对应导航相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <style> *padding: 0;margin: 0;list-style: none; .clearfix:after display: block; content: ""; clear: both; .clearfix zoom: 1 .list-div ulmargin: 0 auto;display: inline-block; .list-ul lifloat: left;list-style: none;width: 100px;border: 1px solid #ddd;text-align: center;height: 40px;line-height: 40px; .list-ul li.activecolor: #f33;border-color: #f33; .list-divposition:fixed;top:0;left: 0;background: #fff;width: 100%;text-align: center;height: 50px; </style> </head> <body> <div> <div class="list-div"> <ul class="list-ul clearfix"> <li class="">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div style="margin-top: 50px;"> <div class="div-item" style="height: 400px;background: aqua;"></div> <div class="div-item" style="height: 500px;background: blue"></div> <div class="div-item" style="height: 900px;background: blueviolet"></div> <div class="div-item" style="height: 500px;background: darkolivegreen"></div> </div> </div> <script src="jquery-1.11.3.min.js"></script> <script> $(function () PageScroll(".list-ul li",".div-item",28) ) function PageScroll(navclick,maodian,elseHeight) //第一个参数 滚动对应导航的集合 默认类名为active //第二个参数 滚动模块的集合 //第三个参数 导航的高度或者你想去除的高度 $(navclick).on("click",function () var scrollT=$(maodian).eq($(this).index()).offset().top; $(window).scrollTop(scrollT-50) ) //滚动事件 $(window).scroll(function() var con_scroll = $(this).scrollTop(); $(maodian).each(function(index,domEle) var md_index = $(this).offset().top-elseHeight; if(con_scroll>md_index-elseHeight) $(navclick).eq(index).addClass("active").siblings().removeClass(‘active‘) ) ); </script> </body> </html>
以上是关于滚动条滚动点亮对应导航的主要内容，如果未能解决你的问题，请参考以下文章