當另一個div滾出屏幕時顯示一個div。 產生不必要的閃爍

Question

我想顯示另一個div（.cu5box-box）在屏幕外滾動時顯示一個div（.cu5-topbar）。 問題在於，.cu5-topbar div正在顯示，而.cu5box-box div正在離開屏幕。 這也導致.cu5-topbar閃爍幾秒鍾，而兩個div彼此重疊。 到目前為止，這是我的代碼：

var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
    jQuery(document).scroll(function () {
        scroll_start = jQuery(this).scrollTop();
        if (scroll_start > offset.top) {
            jQuery('.cu5box-box').fadeOut(400);
            jQuery('.cu5-topbar').fadeIn(400);
        } else {
            jQuery('.cu5box-box').fadeIn(400);
            jQuery('.cu5-topbar').fadeOut(400);
        }
    });
}

https://jsfiddle.net/zgu70p4m/

我希望.cu5-topbar div出現在.cu5box-box div完全不在屏幕上的情況下，我希望.cu5-topbar div一旦.cu5box-box div出現就消失到屏幕上。

Answer 1

請嘗試以下操作，您沒有在jsfiddle示例中包含jQuery。

您還需要將滾動事件附加到窗口。 最后，偏移量需要將元素高度添加到總和中，以確保您在正確位置獲得元素末端的位置。

var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
    $(window).scroll(function () {
        scroll_start = $(this).scrollTop();
        if (scroll_start > offset.top + startchange.height()) {
            $('.cu5-topbar').fadeOut(400);
        } else {
            $('.cu5-topbar').fadeIn(400);
        }
    });
}