当另一个div滚动屏幕时显示一个div。获得不必要的闪光

问题描述 投票:0回答:1

当另一个div(.cu5box-box)滚出屏幕时,我想显示一个div(.cu5-topbar)。问题是当.cu5box-box div离开屏幕时,.cu5-topbar 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-box栏div在.cu5box-box div出现后立即消失到屏幕上。

javascript jquery html css
1个回答
0
投票

试试下面的内容,你没有在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);
        }
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.