jquery楼层滚动重要知识总结

浏览器页面的滚动事件

$(window).scroll(function() {
    // 当页面发生滚动时要做的事情
});

获取当前页面内容区域的高度

$(window).innerHeight() 通常用 innerHeight()/2 内容区域一半的高度

获取滚动条到页面顶部的垂直距离

$(document).scrollTop() 或 $(window).scrollTop()

获取当前块元素距离页面顶部的距离

jQuery

$("#tabOne").offset().top;

Javascipt

document.getElementById("tabOne").offsetTop;

实现滚动效果

$("html,body").animate({ scrollTop: 300 })

animate语法： (selector).animate({styles},speed,easing,callback)

styles：必需。规定产生动画效果的一个或多个 CSS 属性/值。

speed：可选。规定动画的速度。可能的值 1 毫秒 2 "slow" 3 "fast"。

easing：可选。规定在动画的不同点中元素的速度。可选 "swing"　"linear"。

"swing" - 在开头/结尾移动慢，在中间移动快。

"linear" - 匀速移动。

callback：可选。animate 函数执行完之后，要执行的函数。

js部分代码：

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$('html,body').scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();

jquery楼层滚动重要知识总结

猜你喜欢