I am using blogspot, and I wanted to exactly achieve this kind of floating navigation bar:

/

As you can see, when you scroll, the floating navigation bar shows as it slides down.

All I know is make a navigation bar:

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

But the rest of the jQuery or javascript stuff is still unknown to me. I have also search but they don't teach exactly what I want.

I'm only new to jQuery and I still have no idea how to implement this.

Your help is much appreciated.

I am using blogspot, and I wanted to exactly achieve this kind of floating navigation bar:

http://apairandasparediy./

As you can see, when you scroll, the floating navigation bar shows as it slides down.

All I know is make a navigation bar:

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

But the rest of the jQuery or javascript stuff is still unknown to me. I have also search but they don't teach exactly what I want.

I'm only new to jQuery and I still have no idea how to implement this.

Your help is much appreciated.

• javascript
• jquery
• css
• navigation
• blogger

1 Answer 1

This should do what you want. (assuming you've already included the jQuery library)

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

        });
    </script>

The CSS is also important, because this places the navigation bar in a fixed position on top of your page.

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

And ofcourse the HTML. I placed all of the above and below in the body tag.

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