How can I make my navbar stick to the bottom of an element upon reaching it?

Question

Okay, I'm trying to get my navbar to stick to the bottom of a 25px tall header that I have at the top of my page. I only want my navbar to stick (become fixed — position: fixed) when it reaches the bottom of that header.

A link to the CodePen I set up can be found below. I apologize for all the extra CSS and JavaScript/jQuery stuff you'll see.... It's all part of the site/design though.

I just can't get my navbar (located at the bottom of the screen) to become fixed when it reaches the bottom of the 25px (black-ish) header at the top of the screen. I've tried 10+ solutions from different places and none of them are doing the trick for me....

http://codepen.io/anon/pen/WrZjWG

Answer 1

Try this script

$(function() {
    var offset = $("#navbar").offset(),
        topPadding = 15;

    $(window).scroll(function() {
        if ($("#sidebar").height() < $(window).height() && $(window).scrollTop() > offset.top) {
            $("#sidebar").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

Answer 2

What you need to do is add a class to your nav so first since you have your nav absolutely positioned in the window we will find the window height and minus your nav and the top bar that you have and then add and remove classes from there. The following will work:

$(window).on('scroll', function () {
  if ( $(window).scrollTop() >= $(window).height() - 105) {
    $( '#mainNav' ).addClass("scrolled");
  }else{
    $( '#mainNav' ).removeClass("scrolled");
  }
});

Then your css

#mainNav.scrolled { /* This will only take place when the navbar reaches the set point on the page */
  position: fixed;
  z-index: 99;
  top:25px;
  left:0;
}

Normally you would use $('div').offset().top instead of $(window).height() - 105 but your nav is absolutely positioned in the window and not in any relative div which will cause inconsistent results so we will find the windows height and then subtract the height of your nav and the top bar. Now your nav should be fixed in the correct position once it is scrolled to the bottom of your top bar. Here is a working codepen CodePen

Answer 3

There is a nacent (supported in Firefox, Safari, and iOS6+; in development in Chrome; "under consideration" in Edge; more data at caniuse.com) CSS property that can achieve this:

position: sticky

There are also a few polyfills to simulate the behaviour of position: sticky in other browsers:

• https://github.com/filamentgroup/fixed-sticky
• https://github.com/wilddeer/stickyfill

These are all much more robust than the few hand-rolled suggestions above.

Answer 4

It works! Add the height of #landingHeaderWrapper in the jquery as I did here http://codepen.io/vishnu1212/pen/jWGwop
Then add a new class with position property like

.sticky{ postion:fixed;}

Use AddClass and removeClass functions to toggle this class