Fix Nav Bar after scroll

Question

I'm trying to fix a nav bar after a x point on scroll, but it's not working, can anyone help me? (i'm new, so take it easy)

$(document).on('scroll', function (event) {
    if (document.body.scrollTop > 550 || document.documentElement.scrollTop > 550) {      
      $('.nav_bar').addClass('navbar-fixed');
    }
  else {
      $('.nav_bar').removeClass('navbar-fixed');
    }
  }
});

Are you sure you are scrolling the body element? – A1rPun Nov 06 '18 at 22:29 — A1rPun, Nov 06 '18 at 22:29

score 2 · Accepted Answer · answered Nov 06 '18 at 22:24

2

Try this:

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if (scroll >= 550) {
        $('.nav_bar').addClass('navbar-fixed');
    } else {
        $('.nav_bar').removeClass('navbar-fixed');
    }
});

answered Nov 06 '18 at 22:24

mansio

59
6

2

You should probably explain your answer. – Get Off My Lawn Nov 06 '18 at 22:39
Here is full answer why use (window) > https://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop – mansio Nov 06 '18 at 22:51

score 0 · Answer 2 · answered Nov 06 '18 at 22:26

0

Since it looks like you are comfortable/with jQuery, you could try something like this:

 $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 550) {
        $('.nav_bar').addClass('navbar-fixed');
    } else {
        $('.nav_bar').removeClass('navbar-fixed');
    }
  });

answered Nov 06 '18 at 22:26

Trace

19
6

Please mark my answer as the best solution if this worked for you. – Trace Nov 30 '18 at 16:40

Fix Nav Bar after scroll

2 Answers2