Question

我正在尝试学习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

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

您可以通过在向下滚动一定数量后添加固定类来执行此操作。您可以将上面示例中的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>

希望这适合你。

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

2 个答案: