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()方法：移除样式类

　　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://blog.csdn.net/cherry8179/article/details/100633300