CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapscroll
testerius
testerius

Reputation: 411

Bootstrap - sticky/fixed navbar when scroll

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();
         });
});

Upvotes: 0

Views: 5346

Answers (1)

Mark S
Mark S

Reputation: 3799

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

Upvotes: 1

Related Questions