滚动监听
要点：
1、scrollTop()的运用
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset
指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
2、offset()的运用
offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
3、offset()和position()
offset():获取匹配元素在当前视口的相对偏移。（绝对位置）
position()：获取匹配元素相对父元素的偏移。（相对位置）
同样该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
4、document.documentElement.scrollTop：获得当前滚动条距离页面顶部的距离
实例1：
<div class="daohang value_daohang"> <div class="daohang_top"> <a href="../../public/duba170724_100_50.exe" class="daohang_top_a"> <div> <img src="../../img/2018-07-03_161728.png" alt=""> </div> </a> </div> <div class="daohang_bottom"> <h2> <div class="daohang_bottom_div"></div> 为您推荐 </h2> <!-- 下方导航--> <ul class="danghang_ul"> <li><span class="bianse">1</span><a href="">猎豹浏览器</a></li> <li><span class="bianse">2</span><a href="">金山毒霸</a></li> <li><span class="bianse">3</span><a href="">驱动精灵</a></li> <li><span>4</span><a href="">猎豹免费wifi</a></li> <li><span>5</span><a href="">金山顽固木马专杀</a></li> <li><span>6</span><a href="">金山急救箱</a></li> <li><span>7</span><a href="">猎豹护眼大师</a></li> <li><span>8</span><a href="">猎豹日历</a></li> <li><span>9</span><a href="">猎豹轻桌面</a></li> <li><span>10</span><a href="">数据恢复</a></li> <li><span>11</span><a href="">CAD病毒专杀</a></li> <li><span>12</span><a href="">更多</a></li> </ul> </div> </div>
//放在页面加载完成中 addtop = $(".value_daohang").offset().top;//第一个导航获得div页面加载完成时距离顶部的距离 Y = $('.value_daohang').offset().left;//第一个导航绝对位置 X = $('.value_div').position().left;//第一个导航的相对位置
//第一个右侧导航栏移动 $(window).scroll(function(){ var navH = document.documentElement.scrollTop;//获得当前滚动条距离页面顶部的距离 // 对比当前元素距离顶部的距离和滚动条的距离 if(navH >= addtop){ $(".value_daohang").css({"position":"fixed","top":0,"left":Y}); $(".haha_daohang").css({"position":"fixed","top":0,"left":Y}) }else if(navH < addtop){ $(".value_daohang").css({"position":"relative","top":0,"left":-X}); $(".value_daohang").css("float","right"); $(".haha_daohang").css({"position":"relative","top":0,"left":-X}); $(".haha_daohang").css("float","right"); } })
实例2：
<div class="tiaozhuan_zong"> <div class="tiaozhuan_top"><img src="../../img/2018-07-05_092905.png" alt=""></div> <div class="tiaozhuan_1 geshi yellow" go="1"><strong>T1</strong></div> <div class="tiaozhuan_2 geshi" go="2"><strong>T2</strong></div> <div class="tiaozhuan_3 geshi" go="3"><strong>T3</strong></div> <div class="tiaozhuan_4 geshi" go="4"><strong>T4</strong></div> <div class="tiaozhuan_5 geshi" go="5"><strong>T5</strong></div> <div class="tiaozhuan_6 geshi" go="6"><strong>T6</strong></div> </div>
weizhi = [];//定义各个模块距离顶部的位置为一个数组 for(var i=0 ; i<$('.wwy').length; i++){ weizhi.push($('.wwy').eq(i).offset().top); }//得到每个模块距离顶部的高度并追加进数组 })
//返回顶部方法 function addEvent_10(){ $(".tiaozhuan_top").click(function(){ $('html, body').animate({scrollTop:0}, 'slow');//返回页面顶部 }) } //对应变色和跳转 function addEvent_11(){ $(".geshi").click(function(){ var www = $(this).attr('go');//获得对应元素属性 var xxx = weizhi[www-1];//将对应高度进行匹配 $("html,body").animate({'scrollTop':xxx}, 'slow');//将得到的对应数组值加入移动到对应高度 $(".geshi").removeClass('yellow');//移除所有自定义class值 $(".tiaozhuan_"+www).addClass('yellow');//对应元素追加class }) }