Navbar stick to top of screen when scrolling past

Question

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?

i guess `mainContent` shouldn't be wrapped inside `navbar` because you cannot scroll any fixed content — A. Wolff, Dec 02 '13 at 11:54
Doh, of course, haha. Can't believe I've been starring myself blind on this. Thanks a bunch!! — Rasmus R, Dec 02 '13 at 11:56
You can write styles that way, tbw. $('.navbar').css({ position: 'fixed', top: '0' }); — Mihey Egoroff, Dec 02 '13 at 11:57
Hmm, I don't seem to be able to pick Wolff's answer as the correct one? — Rasmus R, Dec 02 '13 at 11:58

Carol Skelly · Answer 1 · 2021-06-22T16:38:09.527

4

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?

edited Jun 22 '21 at 16:38

answered Dec 02 '13 at 11:50

Carol Skelly

351,302
90
710
624

1

I think this is going to work perfectly for me! One question... at the precise point that the nav hits the top, the content below jumps up what looks to be the height of the nav. Is it possible to avoid that jump? – JoshP Jan 31 '14 at 04:24

score 1 · Accepted Answer · answered Dec 02 '13 at 11:56

1

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.

answered Dec 02 '13 at 11:56

daveyfaherty

4,585
2
27
42

score 0 · Answer 3 · edited May 23 '17 at 12:19

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?

score 0 · Answer 4 · answered Jan 16 '15 at 09:48

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

});

Please edit your post to explain why your idea is better than the expected one. Please also consider to explain your code a bit. — Robin Ellerkmann, Jan 16 '15 at 09:53

score 0 · Answer 5 · answered Feb 22 '16 at 16:49

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

Navbar stick to top of screen when scrolling past

5 Answers5

Linked