Trigger event when scroll past bottom of element?

Question

So on my website I have a static header at the very top of the site -- it's not fixed to the top of the viewport. However, what I'd like to do is once the user scrolls past the bottom of this div, for a fixed navbar to appear. My code almost works, but only triggers at the top offset of the div, which is the very top of the page. Here's my code:

$("#header-2").hide(); // hide the fixed navbar initially

var topofDiv = $("#header-container").offset().top; //gets offset of header
$(window).scroll(function(){
    if($(window).scrollTop() > topofDiv){
       $("#header-2").show();
    }
    else{
       $("#header-2").hide();
    }
});

Again, I need to trigger showing the fixed navbar once the user scrolls past the bottom of #header-container, not the top like it does now. Help?

Answer 1

I think that if you add the height of the div to the top offset you'll get the behaviour you want

$("#header-2").hide(); // hide the fixed navbar initially

var topofDiv = $("#header-container").offset().top; //gets offset of header
var height = $("#header-container").outerHeight(); //gets height of header

$(window).scroll(function(){
    if($(window).scrollTop() > (topofDiv + height)){
       $("#header-2").show();
    }
    else{
       $("#header-2").hide();
    }
});