向下滚动时如何使导航跟随？ [复制]答案

【问题标题】：How to make navigation follow when scrolled down? [duplicate]向下滚动时如何使导航跟随？ [复制]
【发布时间】：2015-09-01 01:55:57
【问题描述】：

我正在尝试学习 jQuery。我想知道我是如何做到这一点的。

假设我有这样的导航：

HTML：

<nav id="navigation">
    <h1>My Navigation</h1>
</nav>

CSS：

nav {
    width:100%;
    height:50px;
    background:black;
}

nav h1 {
    color:white;
}

英语不是我的母语，但我会尽力解释这一点。

当用户向下滚动时，如何使此导航跟随/向下浮动。这样导航总是停留在使用 jQuery（或 vanilla JavaScript，但首选 jQuery）的网站可见区域的顶部？

jsfiddle：http://jsfiddle.net/ax6uts7z/

我的意思示例：http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/demo/complete.html

【问题讨论】：

也许你需要position: fixed，据我所知。可以举一些例子吗？
不，我的意思是它应该浮动，所以它总是在可见区域的顶部。我会试着举个例子。
我的意思是这样dwuser.com/education/content/…

标签： jquery css navigation

【解决方案1】：

您只需将 position: fixed 添加到您的导航 CSS 中即可。

nav {
    width:100%;
    height:50px;
    background:black;
    position: fixed;
}

这是fiddle。我添加了一堆中断以使页面可滚动。如您所见，导航栏是固定的，向下滚动时会跟随。

编辑：由于 OP 更新了问题的要求，请参见下文：

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

您可以通过在固定类向下滚动一定量后添加它来做到这一点。您可以通过将上面示例中的50 替换为您想要的像素数来调整此数量。数字越大，在应用fixed 位置属性之前，您必须向下滚动得越远。

【讨论】：

不，我的意思是它应该浮动，所以它总是在可见区域的顶部。我会试着举个例子。
我的意思是这样的：dwuser.com/education/content/…
哦！就是这么简单啊！非常感谢！ :)
我用另一种可能的 jquery 解决方案为您的示例更新了我的答案。

【解决方案2】：

好的。开始了。你需要一个粘性菜单。当用户向下滚动菜单固定在顶部时。

<!doctype html>
<html>    
<head>
<title>Menu fixed on top</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.sticky.js"></script>
    <!--include this in header---->
    <script>
        $(window).load(function() {
            $("#navigation").sticky({
                topSpacing: 0
            });
        });
    </script>
    <style>
        nav {
            width:100%;
            height:50px;
            background:black;
            padding:5px;
        }
        nav h1 {
            color:white;
        }
    </style>
</head>

<body>
    <nav id="navigation">
         <h1>My Navigation</h1>
</nav>
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
</body>
</html>

希望这对你有用。

【讨论】：