js，jquery吸顶实现与问题解决

一.原生js实现吸顶效果

• scrollTop属性：元素的最顶部到窗口顶边的距离。即是滚动条滚动的距离
• offsetTop属性：元素到其父层顶部的距离。不能对其进行赋值。设置元素到页面顶部的距离请用style.top属性。

var navBar = document.getElementById("#navBar"),
    navToTop = navBar.offsetTop();
document.onscroll = function () {
   //获取当前滚动距离
   var scrollDistance = document.body.scrollTop || document.documentElement.scrollTop;
   //如果滚动距离大于发票号条距顶部的距离，给发票号条设置fix
   if (scrollDistance  > navToTop + 80) {
       navBar.className = "common fix";       
    } else {
       navBar.className = "common";
    }
}
//css代码
//fix｛position: absolute;top:0;left:0｝

 二.jquery实现吸顶效果

• offset()方法：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
• scrollTop()方法：获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
• addClass()方法：添加样式类
• removeClass()方法：移除样式类
• 坚挺scroll事件

var navBar = $("#navbar");
var navToTop = navBar.offset().top;
$(document).on('scroll',function(){
    var scrollDistance = $(document).scrollTop();
    if(scrollDistance > navToTop){
        navBar.addClass("fix");
    }else{
        navBar.removeClass("fix");
    }
})

三.问题

情景：要吸顶的元素上面有其他有高度元素，

1.原生js出现问题，吸顶元素自身跳动，offsetTop是相对父层顶部，所以要scrollDistance>navToTop + 上方元素的高度

2.jquery不会出现问题，offset()是相对于视口的。

情景：吸顶一瞬间，要吸顶元素下方跳动

原因：吸顶元素设置成fixed，脱离文档流，所以下方元素跳动

解决办法:

(1)设置占位框，默认display:none，滚动到距离时display:block；

(2)给吸顶元素添加包含框，并设置高度。

 

转载于:https://my.oschina.net/wyc1219/blog/1506093