Geek asks and answers

Creating a sticky navigation bar using twitter bootstrap?

I am trying to introduce a navigation bar which, when it is no longer visible, then assumes a fixed positioning of the header. I started by using this topic: Replicating Bootstraps main nav and subnav .

Since then I have reached: http://jsfiddle.net/yTqSc/2/ .

Problem :

Anchor links will exceed their target (while hiding the heading of the destination) whenever the navbar is in its original position, but not once fixed. I can fix the overshoot (I mentioned http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/ ), but then I get an excessive gap using the links when the navbar is fixed.

Can anyone advise how to get consistent results whether navbar is installed or not?

Thank.

+5
source share
3 answers

Is this what you are looking for?

<div class="navbar navbar-fixed-top">
+15
source

You do not have CSS for navbar-fixed-top. In addition, you need to access when you scroll through backups.

. http://jsfiddle.net/yTqSc/39/

JavaScript

$(document).scroll(function(){
var elem = $('.subnav');
if (!elem.attr('data-top')) {
    if (elem.hasClass('navbar-fixed-top'))
        return;
     var offset = elem.offset()
    elem.attr('data-top', offset.top);
}
if (elem.attr('data-top') <= $(this).scrollTop() )
    elem.addClass('navbar-fixed-top');
else
    elem.removeClass('navbar-fixed-top');
});

CSS

.subnav {
    background:#FFF;
}
.navbar-fixed-top {
    position:fixed;
}

jQuery Waypoints .

+4

It was nice, but I went crazy to implement a sticky nav on the bottom top, namely: http://golkhaneh.tv3.ir/

How can I do that?

0
source

More articles:


All Articles