Bootstrap-滚动时的粘性/固定导航栏

Question

I'd like to create a navbar like this one: http://bartiistudio.tk/noxilie/onepage/index.html

Well, I use stickUp jQuery script but my navbar doesn't work Wery well. I don't know how to fix it.

And here is jsfiddle: http://jsfiddle.net/52VtD/792/

stickUp code:

jQuery(function($) {
        $(document).ready( function() {
         //enabling stickUp on the '.navbar-wrapper' class
         $('.navbar-wrapper').stickUp();
         });
});

Answer 1

If all your problem is the navbar-wrapper not occupying the full width. You just need to set it width:100% . The stickUp changed the position of the navbar from relative to fixed so that caused the problem.

If all you need to do is just stick the navbar on top why not create your own script.

It's fun and easy :D

$(document).ready( function() {
    var $stick = $('.navbar-wrapper');

    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();

        if(scrollTop >= $stick.offset().top){
            $stick.css({'position':'fixed'});
        }else{
            $stick.css({'position':'relative'});
        }
    });
});

See this jsfiddle