JS控制导航栏滚动到底部后固定

发布于 / JavaScript / Comments Off on JS控制导航栏滚动到底部后固定

实现起来很简单,我们可以通过JS原生的方式或者使用jQuery等等,获取元素的高度,然后在 window.onscroll 事件中,比较滚动位置与元素高度的位置即可。

JS代码:

function NavFixed(id){
  var obj = document.getElementById(id);
  var _getHeight = obj.offsetTop;
  window.onscroll = function(){
    changePos(id,_getHeight);
  }
}
function changePos(id,height){
  var obj = document.getElementById(id);
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop < height){
    obj.style.position = 'relative';
  }else{
    obj.style.position = 'fixed';
        }
}

使用时只需要调用一次NavFixed,参数为想要固定的元素ID名。例如

NavFixed("navbar");

转载原创文章请注明,转载自: 斐斐のBlog » JS控制导航栏滚动到底部后固定
评论已关闭