jquery遍历 页面所有的class名叫tou的div 当 tou滚动到顶部时添加一个class名gao 当离开顶部时去除class gao
代码可以直接复制运行
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } .phet{ height: 44px; text-align: center; line-height: 44px; } .div{ height: 44px; border: 1px solid red; text-align: center; line-height: 44px; background: #EFEFF4; width: 100%; } .gao{ position: fixed; z-index: 99; top: 0; } </style> <body> <div class="madin"> <div class="tou"> <p>这是第一个div</p> </div> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <div class="tou"> <p>这是第二个div</p> </div> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <div class="tou"> 这是第三个div </div> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> <p class="phet">加一些没用的可以撑起页面让页面滚动</p> </div> </body> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //获取定位元素距离浏览器顶部的距离 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); // 分别获取ding的top $(".tou").each(function(index, ele) {//遍历所有的ding //获取div距离顶部页面的距离 $(this).data('top', $(this).offset().top) // scroll里面, 需要分别判断top if ($(this).data('top') - scroH < 42 ) { if (!$(this).hasClass('gao')) { $(this).addClass('gao').css("z-index","99"); } } else if($(this).data('top') - scroH > 42 ) { $(this).removeClass('gao').css("z-index","0"); } }) }); }); </script>
</html>
暂无回复，说出你的观点吧