javascript导航特效 js导航条

实现的效果大概是，滚动条往下滚动至导航条被隐藏时，将导航条置顶；滚动条往上滚动至导航条出现时，回到原来位置。

大致逻辑是先获取导航条距离页面顶部的高度，滚动条滚动时，动态获取页面被卷起的高度；
将导航条距离页面顶部的距离与页面被卷起的高度作比较。

html代码

<div id="nav" style="width: 1200px;max-height: 100px">
        <div>导航条内容</div>
    </div>

js代码

// 导航条被卷起后置顶
// 获取导航条的高度
const nav = document.getElementById("nav")
const nav_height = nav.offsetHeight;
function f() {
    //获取页面被卷起的高度即滚动条隐藏的高度
    const top_distance = document.documentElement.scrollTop;
    if (top_distance >= nav_height){
        nav.style.position = "fixed";
        nav.style.top = 0;
    }
    else{
        nav.style.position = "static";
    }
}
// 滚动条滚动时执行
$(document).scroll(function (){
    f()
})

我遇到的问题
1、滚动条滚动到一定距离时导航条并没有被置顶，但在此状态下重新加载页面后发现制定了。

2、导航条置顶后发现宽度变成了整个浏览器的宽度而不是我设置的页面的宽度。

原因及解决办法
1、我的问题是在于将获取页面被卷起的高度放在了函数外，此时它只在页面被刷新的时候会获取值，滚动条滚动时并不会重新加载该变量的值；只需要将其放在f函数内即可（在滚动条滚动时会调用f函数，此时也会重新获取页面被卷起的高度），而由于导航条的高度是不变的，所以只需在页面加载的时候获取一次即可。

2、置顶后默认百分百显示，可以在外面加一个div父元素并指定相应的高度。

---

或者直接引入bootstrap3里面的导航条组件，里面有一个navbar-fixed-top类可以实现导航条固定在顶部（导航条宽度占全屏）。但是会遇到一个问题，导航条会遮住下面模块的内容，可以在样式里加入padding-top解决。