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尽快出现在屏幕上，而我希望.cu5-topbar div在.cu5box-box消失后立即消失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);
        }
    });
}

当另一个div滚出屏幕时显示一个div。产生不必要的闪烁

1 个答案: