当另一个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出现后立即消失到屏幕上。
试试下面的内容,你没有在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);
}
});
}