滚动时显示浮动导航栏

时间:2015-05-01 07:42:56

标签: javascript jquery css navigation blogger

我正在使用blogspot,我想要完全实现这种浮动导航栏:

http://apairandasparediy.com/

如您所见,当您滚动时,浮动导航栏会在向下滑动时显示。

我所知道的是制作导航栏:

<div id="floating-nav-content">
   <div class="floating-nav">
      <ul id="menu-floating-menu" class="menu">
         <li>...</li>
         <li>...</li>
         <li>...</li>
         <li>...</li>
      </ul>
   </div>
</div>

但是其余的jQuery或javascript东西对我来说仍然是未知的。我也有搜索,但他们没有教我到底想要什么。

我只是jQuery的新手,我仍然不知道如何实现它。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:3)

这应该做你想要的。 (假设您已经包含了jQuery库)

    <script type="text/javascript">
        $(document).scroll(function() {
            if ($(this).scrollTop() == 0) {
                $("#floating-nav-content").slideUp(400);
            } else {
                $("#floating-nav-content").slideDown(600);
            }

        });
    </script>

CSS也很重要,因为这会将导航栏放在页面顶部的固定位置。

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        #floating-nav-content {
            top: 0;
            width: 100%;
            height: 20px;
            background-color: #000;
            position: fixed;
            display: none;
            color: #FFF;
            padding: 5px;
        }
    </style>

当然是HTML。 我把所有上方和下方放在身体标签上。

    <div id="floating-nav-content">
        Content
    </div>