Show bootstrap navbar after scroll past initial screen

Question

I have an initial screen with a signup form and I want a navbar with a signup link to only appear after scrolling past the signup form. Is there a way to do this with jquery?

Answer 1

I wrote this jquery to add the class 'snap' to a navigation bar when you scrolled past the top of the container (#container) containing the nav bar. In this case, my 'snap' class gives my navigation a fixed position (relative to the body) so it'll stick to the top of the screen.

If you use this code, you can change #container for the id of the block that comes after your sign up form. What I would do next is hide your navbar maybe {top:-200px;}? by default and then add a class to it ('snap' - or whatever is semantically meaningful for you) to make it appear {top:0;}.

$(window).scroll(function(scroll) {
    var navStart = $('#container').offset().top;

    var scroll = $(window).scrollTop();
    if (scroll > navStart) {
      $('nav').addClass('snap');
    } else {
      $('nav').removeClass('snap');  
    }
  });

Answer 2

You can use the scrollTop function and an if statement to check against a variable such as the element height or position from the top.

https://api.jquery.com/scrollTop/

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

    if (scroll > x) {

    }
});