1

I'm trying to have a fixed vertical navigation bar but only once the user has scrolled down to it. I have placed it 66px under my heading and it needs to get caught once the user has scrolled down to its 66px margin and stay fixed on the screen I'm close but as you can see it's not perfect. https://jsfiddle.net/1krd9zpc/7/

$(window).on('scroll', function() {
if($(window).scrollTop() > $('#navbox').offset().top){
    $('#navbox').css({
        'top': $(window).scrollTop() > 0 ? '0px' : '66px',
        'position': 'fixed'
    });
 }
});

This code (improved by Mathias W) sort of works, when we scroll back up it needs to reset to its previous position.

ccc
  • 467
  • 1
  • 6
  • 11
  • 2
    What does "catch my navigation bar" mean? – StudioTime Feb 07 '16 at 11:26
  • seems like you need to fix up the menu when scrolling, so accordingly you need to use position fixed for it.. – ameenulla0007 Feb 07 '16 at 11:28
  • 1
    I think you need this, right? http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll – Pedram Feb 07 '16 at 12:43
  • Sorry I was a little tired when I wrote that and it's sort of hard to explain. Yes it's similar jiff but a little different. The foundation of the nav never changes just its position and only when we scroll down to catch it. It needs to always be 66px below that black box but once caught from scrolling also 66px from the top of the screen. – ccc Feb 07 '16 at 21:30
  • So.. just to see if I understand... red box should be 66px below the black box OR the window top, whichever is greater, at all times? – Scott Feb 07 '16 at 23:27
  • Correct SOIA, Mathias W was kind enough to help me out if you wish to see https://jsfiddle.net/3g52v5oh/1/ – ccc Feb 07 '16 at 23:31

1 Answers1

1

You have to apply the css attribute position and set it's value to fixed (position:fixed).

$(window).on('scroll', function() {
  $('#navbox').css({
      'top': $(window).scrollTop() > 0 ? '0px' : '66px',
      'position': 'fixed'
      });
});

See fiddle:

https://jsfiddle.net/3g52v5oh/

If you only want to "catch it" once you've reached the element while scrolling you can check navbox's offset position with $('#navbox').offset().top

$(window).on('scroll', function() {
    if($(window).scrollTop() > $('#navbox').offset().top){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
});

Update for accepted answer

Save the navbox's top offset to a variable and then check if the window's scrollTop value is less or more

var navboxHeight = $('#navbox').offset().top;
$(window).on('scroll', function() {
    if($(window).scrollTop() > navboxHeight){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
    // Reset navbox to it's default position
    if($(window).scrollTop() < navboxHeight){
        $('#navbox').css({
            'top': '',
            'position': 'static'
        });
    }
});
Mathias W
  • 1,433
  • 12
  • 16
  • I appreciate the help man, very close. Sorry I was tired when I wrote that and need to be clearer. It needs to always be 66px below the black box and once scrolled down to catch it, is 66px below the screen. So even if you scroll back up to the top it gets released, see what I mean? Sort of hard to explain. – ccc Feb 07 '16 at 21:32
  • You're the man. Thanks a ton :)...Unrelated question. Where did you learn to write javascript? I need to learn it badly. – ccc Feb 07 '16 at 23:29
  • No probs mate :) I'm solely self-thought - learning by doing. I don't really have any source of knowledge which I've learned most from in particular but I think codecademy and codeschool are pretty solid sites. You'll learn a lot by just coming up with an idea and then tring to create it. – Mathias W Feb 07 '16 at 23:40
  • 1
    Yeah that's also how I learned most of my html/css knowledge, once you have the fundamentals down it's just improving your knowledge from there. Once this project is done I'll work on it, cheers :). – ccc Feb 07 '16 at 23:44