首页 > JS专栏 > JS打造吸附导航条 向下滑动滚动条时导航条自动吸附
2016
06-20

JS打造吸附导航条 向下滑动滚动条时导航条自动吸附

效果图如下:


主要JS代码如下:

<script type="text/javascript">
window.onload = function(){
    var obj = document.getElementById("nav");
    var _getHeight = obj.offsetTop;
    
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if(scrollTop < _getHeight){
			obj.style.position = 'relative';
		}else{
			obj.style.position = 'fixed';
		}
    }
}
</script>