CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Rasmus R
Rasmus R

Reputation: 47

Navbar stick to top of screen when scrolling past

I am making a website, where I want the navbar to change its position to 'fixed' when I scroll past it.

There is a problem though. The design completely messes up when I change its position value. See www.rowweb.dk/skyline/ - I'm using Bootstrap by the way.

I have the following block of code so far:

$(window).scroll(function () {
    winHeight = $(window).height();
    if ($(window).scrollTop() > winHeight) {
        $('.navbar').css('position', 'fixed');
        $('.navbar').css('top', '0');
    }
});

Does anyone have a solution to my problem?

Upvotes: 1

Views: 12231

Answers (5)

Carol Skelly
Carol Skelly

Reputation: 362790

Take a look at the Bootstrap Affix plugin: http://getbootstrap.com/javascript/#affix

Here's a working example: https://codeply.com/p/HAQSABYqPY

Related
Sticky NavBar onScroll?

Upvotes: 4

Anand
Anand

Reputation: 111

        function FixedTopMenuOnScroll() {
            var winHeight = $(".site-header").height();//any image,logo or header above menu
            winHeight = winHeight - $('.navbar').height();
            function checkMenuOnTop() {
                if ($(window).scrollTop() > winHeight) {
                    $('.navbar').addClass("navbar-fixed-top");
                }
                else {
                    $('.navbar').removeClass("navbar-fixed-top");
                }
            }
            checkMenuOnTop();
            $(window).scroll(function () {
                checkMenuOnTop();
            });
        }
        FixedTopMenuOnScroll();

Upvotes: 0

Bhupinder Kumar
Bhupinder Kumar

Reputation: 11

$(function() {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) { 
        $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
        $('#sticky_navigation').css({ 'position': 'relative' }); 
    }   
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){ 
    event.preventDefault(); 
});

});

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

Apply this for solid working without plugin.

Here is working jsFiddle.

$(document).ready(function() {
    var windowH = $(window).height();
    var stickToBot = windowH - $('#menu').outerHeight(true);
    //outherHeight(true) will calculate with borders, paddings and margins.
    $('#menu').css({'top': stickToBot + 'px'});

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
});​

Source: How to build simple sticky navigation at the page bottum?

Upvotes: 0

daveyfaherty
daveyfaherty

Reputation: 4613

A. Wolff is right.

'#mainContent' is inside .navbar, and so they are both fixed to the top, and overlay the .jumbotron element, as well as not being scrollable.

Move it outside .navbar and you should be ok.

Upvotes: 1

Related Questions