Wosley Alarico Wosley Alarico - 3 months ago 6
Javascript Question

how to make the navbar fixed to top

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

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:

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


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

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

Comments