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

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做法,扣的高手的代码,呵呵


你可能感兴趣的:(当滚动要超过元素时固定元素和恢复)