javascript - 如何使用 jQuery 使某个 Div ID 显示在不同的 Div ID 上或之后

Question

我正在尝试编写一个 jQuery 代码，以便我的菜单将隐藏在页面的顶部，并在达到或超过某个 div ID 时显示。我已经写了我能做到的最好的方法来实现这一目标，但没有用。谁能帮我正确配置它？谢谢。

jQuery (function($){
var topHeader = $('#top-header');
var mainSlider = $('#pbf-main-slider');
    if (topHeader >= mainSlider) {
        topHeader.show();
    } else {
        topHeader.hide();
    }

});

菜单隐藏区域

菜单显示区

最终结果(我添加了需要此功能的菜单的另一部分)

    jQuery (function($){
var topHeader = $('#top-header');
var mainHeader = $('#main-header');
var mainSlider = $('#pbf-main-slider');
var mainSliderHeight = mainSlider.outerHeight(true);
$(window).scroll(function () {
    var scrollTop = $(this).scrollTop(); //get the scroll position
    if (scrollTop >= mainSliderHeight) {
        topHeader.slideDown(1000);
        mainHeader .slideDown(1000);
    }
    else {
        topHeader.hide(500);
        mainHeader .hide(500);
    }
})
});

Answer 1

您应该获取主 slider 的高度，如下所示:

var mainSlider = $('#pbf-main-slider');
var mainSliderHeight = mainSlider.outerHeight(true);

然后，如果滚动超过 mainSlider 的高度，则显示顶部栏，如下所示:

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop(); //get the scroll position
    if (scrollTop >= mainSliderHeight) {
        topHeader.show();
    }
    else {
        topHeader.hide();
    }
}