Javascript 如何拥有一个只有向下滚动时才可见的固定导航栏？

请帮助我有一个固定顶部导航栏，它最初是不可见的，向下滚动时会出现。请参考

---

我想要一个与本网站功能完全相同的导航栏。

我不知道你的进展。你应该提到你的进步。顺便说一下，几天前我也做过同样的问题。你可以试试

 <script type="text/javascript">
            jQuery(function($) {
               function fixDiv() {
                var $cache = $('#getFixed');
                if ($(window).scrollTop() > 0)
                    $cache.css({

                    'display' : 'block',
                    'position': 'fixed',
                    'top': '0px'
              });
                 else
                 $cache.css({
                 'position': 'relative',
                 'top': 'auto',
                 'display' : 'none'
              });
           }
         $(window).scroll(fixDiv);
            fixDiv();
           });
    </script>

jQuery（函数（$）{
函数fixDiv（）{
var$cache=$（'#getFixed'）；
如果（$（窗口）.scrollTop（）>0）
$cache.css({
“显示”：“块”，
'位置'：'固定'，
“顶部”：“0px”
});
其他的
$cache.css({
'位置'：'相对'，
“顶部”：“自动”，
“显示”：“无”
});
}
$（窗口）。滚动（fixDiv）；
fixDiv（）；
});

导航栏应该是-

<nav class="" id="getFixed">
     <!-- your navbar code here. Just focus on the id of nav tag-->
</nav>

编辑：-在页面中添加样式

<style>
    #getFixed{
    width: 100%;
    height: 60px;
    background: green;
    display: none;
    z-index: 999;
}
</style>

#修复{
宽度：100%；
高度：60px；
背景：绿色；
显示：无；
z指数：999；
}

现在再看一遍脚本

实际上，导航栏永远不会隐藏。这里发生的只是一个导航栏，通过过渡效果显示出来，并粘贴到页面顶部

---

Sajeeb Ahamed提供了一个符合期望行为的答案。然而，我也建议使用

.addClass

而不是

.css

来让导航栏粘在顶部。Bootstrap为这些事情提供了一个类。如果您使用的是引导，那么只需使用

$cache.addClass（'navbar-fixed-top'）

。还有更多示例说明如何处理导航栏。您可以查看引导navbar文档，您可以找到这些文档。

到目前为止您尝试了什么？您需要添加自己的代码以表明您至少尝试了……jQuery（函数（$）{function fixDiv（）{var$cache=$（'#getFixed'）；if（$（窗口）.scrollTop（）>50）$cache.css（{'position'：'fixed'，'top'：'0px'}）；else$cache.css（{'position'：'relative'，'top'：'auto'}）；}$（window）。滚动（fixDiv）；fixDiv（）；}); 我试过了，但是navbar没有一开始就隐藏起来。看到编辑过的答案。你的答案是个好主意，但是我认为你可以通过用一个

.addClass（）

替换

.css（）

来优化它，并在你的CSSIt中定义固定导航栏的所有样式。这不是一个坏主意。谢谢你，Sajeeb，但它没有一开始就隐藏起来。我希望导航栏最初像snowehome.com一样隐藏。请参考并帮助我。添加一些外部CSS以最初隐藏它。i、 e.#getFixed{显示：无；}