最近做项⽬⽤了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现。1.scroll()事件
当⽤户滚动指定的元素时,会发⽣scroll事件。适⽤于所有可滚动的元素和window对象(浏览器窗⼝)$(select).scroll([Data],fn);
当(浏览器窗⼝)页⾯滚动条变化时,执⾏的函数,JQuery代码:$(window).scroll(function(){ //do something...});
2.scrollTop 获取匹配元素相对滚动条顶部的偏移scrollTop(val)
获取页⾯滚动条的具体值:$(document).scrollTop();设置相对滚动条的偏移值:$(document).scrollTop(300);
3.offset() 获取匹配元素在当前视⼝的相对偏移。offset([coordinates])
获取元素的相对偏移:$(\".bg02\").offset().top;
设置元素的相对偏移:$(\".bg02\").offset({\"top\":1000, \"left\":0});
4.需求:当(浏览器窗⼝)页⾯滚动条值⼩于300px时隐藏div,⼤于300px时显⽰div$(window).scroll(function(){
//var ds = document.documetElement.scrollTop || document.body.scrollTop; //js兼容获取滚动条 if($(document).scrollTop() < 300){ $(\".position\").css({\"display\":\"none\ }else{
$(\".position\").css({\"display\":\"block\ }});
5.返回顶部和元素定位(1-10)$(\".position ul li\").click(function(){ var num_index = $(this).index() + 1; if(num_index < 10){
$(\"html,body\").animate({scrollTop:$(\".bg0\" + num_index).offset().top},800); }else if(num_ineex ==10){
$(\"html,body\").animate({$(\".bg\"+num_index).offset().top},800);
}else if(num_index == 11){
$(\"html,body\").animate({scrollTop:0},800); }else{
return false; }});
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- hzar.cn 版权所有 赣ICP备2024042791号-5
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务