如何将导航栏固定在顶部

Question

I just created one page website and wanna make my navbar fixed. At the moment it looks as the picture shows:

To do that, I floated the logo to the left, navbar to the right and set the position to absolute so that right and bottom could be set to zero.

Here my html and some of the css:

<div class="navigation">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-menu-1-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-55"><a href="http://localhost/scentology/">Home</a></li>
                <li id="menu-item-107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107"><a href="#about">About</a></li>
                <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144"><a href="#products-and-services">Products &#038; Services</a></li>
                <li id="menu-item-142" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="#scent-marketing">Scent Marketing</a></li>
                <li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145"><a href="#clients-and-industries">Clients &#038; Industries</a></li>
                <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="#contact">Contact Us</a></li>
            </ul>
        </div>      
    </nav>  
</div>

.navigation{
    height:40px; line-height:40px;
}
nav#site-navigation {
    position: absolute;
    right: 0;
    bottom: 0;
}

I don't now much about scripting yet but was trying to adjust this snippet:

<script>
// Create a clone of the menu, right next to original.
$('.navigation').addClass('original').clone().insertAfter('.navigation').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
    var orgElementPos = $('.original').offset();
    orgElementTop = orgElementPos.top;               
    if ($(window).scrollTop() >= (orgElementTop)) {
        // scrolled past the original position; now only show the cloned, sticky element.
        // Cloned element should always have same left position and width as original element.     
        orgElement = $('.original');
        coordsOrgElement = orgElement.offset();
        leftOrgElement = coordsOrgElement.left;  
        widthOrgElement = orgElement.css('width');
        $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
        $('.original').css('visibility','hidden');
    } else {
        // not scrolled past the menu; only show the original menu.
        $('.cloned').hide();
        $('.original').css('visibility','visible');
    }
}
</script>

The menu was fixed,but the problem is that I cannot see it properly because of the position properties I assume.I had to change the bottom value to see it. So that will only work when I scroll to the bottom. When I try to scroll back to top,the menu will not be visible.

How can I put the navbar fixed to the top when I scroll down and back to it's default position when I scroll up?

Answer 1

Try to keep things as short and simple as possible.

Replace you scripting with the jquery code below where you simply check if the scrolling position is off set:

(function( $ ){     
   var navOffset = jQuery("nav").offset().top; 
   jQuery(window).scroll(function() {
       var scrollPos = jQuery(window).scrollTop();
        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }
    });
})(jQuery);

Whatever styling you decide t apply must be according to the .fixed class. Remember that the fixed class will be removed every time you scroll to the top.

So here is your css:

.fixed{
    position:fixed !important;
    z-index: 9999;
    top: 4%;
    width: 100%;
    text-align: center;
}

Depending on your content,I guess you will just need to play around with your top percentages

Answer 2

Add to your css the following:

.navigation{
height:40px; 
line-height:40px;
position:fixed;

And put the elements after your navigation class in a div called content
Example:

<div id='content'>
<!--Put your main stuff here!-->
</div>

the css for content :

#content {
padding-top: someValueInPixel;
}

check the height of your navigation and replace someValueInPixel with that value.

With my solution you don't need javascript to hold your navbar at the top and you don't need the nav#site-navigation css

Why position:fixed;
w3schools.com says:

    The element is positioned relative to the browser window

That means, your element is on the top even when you scroll