滚动元素底部时触发事件？

Question

所以在我的网站上,我在网站的最顶部有一个静态标题 - 它没有固定在视口的顶部.但是,我想做的是一旦用户滚过这个div的底部,就会出现一个固定的导航栏.我的代码几乎可以工作,但只触发div的顶部偏移量,这是页面的最顶层.这是我的代码:

$("#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();
    }
});

同样,我需要在用户滚过底部时触发显示固定的导航栏#header-container,而不是像现在一样滚动顶部.救命？

Answer 1

我认为如果你将div的高度添加到顶部偏移量,你将得到你想要的行为

$("#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();
    }
});