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

Question

I would like to show one div (.cu5-topbar) when another div (.cu5box-box) scrolls off screen. The problem is that the the .cu5-topbar div is showing up right as the .cu5box-box div is leaving the screen. That's also causing the .cu5-topbar to flashing for a few seconds while the two divs overlap each other. Here is my code so far:

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/

I would like for the .cu5-topbar div to show up as soon the .cu5box-box div is completely off of the screen and I would like for the .cu5-topbar div to disappear as soon as the .cu5box-box div comes onto the screen.

Answer 1

Try the below, you had not included jQuery in your jsfiddle example.

You also needed to attach the scroll event to the window. Finally the offset needed the elements height added to the total to make sure you where getting the correct position of the end of the element.

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);
        }
    });
}