当滚动要超过元素时固定元素和恢复

最新推荐文章于 2024-01-25 17:33:07 发布

weixin_33775582

最新推荐文章于 2024-01-25 17:33:07 发布

阅读量97

点赞数

原文链接：https://my.oschina.net/itxti/blog/185119

版权

为什么80%的码农都做不了架构师？>>>

window.onload = function () {
          var menu = document.getElementById('menu');
          var init = menu.offsetTop;
          var docked;
}

window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {//超过时
menu.style.top = 0;
menu.style.position = 'fixed';//固定
menu.className = 'docked';//添加这个classname
docked = true;
} else if (docked && scrollTop() <= init) {//恢复
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');//移除这个classname
docked = false;//关闭开关
}
}; 

function scrollTop() {//计算被卷起来的高度
return document.body.scrollTop || document.documentElement.scrollTop;
}

当滚动要超过元素时固定元素，当卷起的小于这个元素距顶端高度是恢复的js做法，扣的高手的代码，呵呵

转载于:https://my.oschina.net/itxti/blog/185119