jqueryscroll()滚动条事件
最近做项⽬⽤了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现。
1.scroll()事件
当⽤户滚动指定的元素时,会发⽣scroll事件。适⽤于所有可滚动的元素和window对象(浏览器窗⼝)
$(select).scroll([Data],fn);
当(浏览器窗⼝)页⾯滚动条变化时,执⾏的函数,JQuery代码:
$(window).scroll(function(){
  //
});
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"});jquery滚动条滚动到底部
  }
});
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;
}
});

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。