向下滚动时如何使导航跟随？

Question

我正在努力学习jQuery。我想知道如何才能做到这一点。

假设我有这样的导航：

HTML:

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

CSS:

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

nav h1 {
    color:white;
}

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

如何在用户向下滚动时使此导航 follow/float 向下。以便导航始终停留在使用 jQuery（或香草 JavaScript，但首选 jQuery 的网站可见区域的顶部）？

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

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

Answer 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');
    }
});

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

Answer 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>

希望这对你有用。

向下滚动时如何使导航跟随？

How to make navigation follow when scrolled down?

css

navigation

jquery