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");