jquery-visible plugin: Using `element.visible(true)` - but still returns true only when the “entire” element is visible. Why?

问题

JsFiddle here!

From this article,

In its simplest form, the element can be checked as follows:
$('#element').visible()
This method will return true if the entire element is visible (I.e., it will return false if any part of that element is outside the viewport. Passing true to the 'visible' method, will tell the plugin to return true if ANY part of the element is visible on the users screen.
$('#element').visible( true )

In the following script, the if block if ( $('.firstPage').visible(true) ) ... is expected to be executed as soon as a part of the .firstPage div becomes visible on the screen while scrolling.

But the problem is that it does not get executed (which implies that $('.firstPage').visible(true) does not return true) as long as the ENTIRE .firstPage element becomes visible. Why? What am I missing?

CODE:

$(window).bind('scroll', function(){

var lastScrollTop = 0;
var originalHeaderPosition =  $(".header-menu-container-nav").offset().top;

var scrollTop = $(this).scrollTop();
var vph = $(window).height();

var currentHeaderPosition = $(document).scrollTop();
var deltaHeaderPosition = currentHeaderPosition - originalHeaderPosition;

if (scrollTop > lastScrollTop){ // downscroll code
    if (deltaHeaderPosition >= vph) {
        $('.header-menu-container-nav').addClass('sticky');
        $('.header-menu-container-nav').fadeIn();
    }
} else {// upscroll code
    if ($('.firstPage').visible( true )) {
        $('.header-menu-container-nav').fadeOut(function() {
            $('.header-menu-container-nav').attr('style','');
            $('.header-menu-container-nav').removeClass('sticky');
        });
    }
}
   lastScrollTop = scrollTop;

});

回答1:

The first problem is that you are resetting lastScrollTop = 0; inside the scroll event. The test scrollTop > lastScrollTop will always be true (except when you go back to the extreme top - position 0).

Once you fix that the next issue is multiple fadeIns occuring. You need to animate the opacity to 1 instead of using fadeIn. Using animate means you cannot rely on the completion event firing, so I switched it to use the jQuery animation queue promise and always to ensure the next code is run.

Here is what I have come up with so far: http://jsfiddle.net/TrueBlueAussie/w7eowzcq/64/

I am not 100% certain of the desired behaviour, but this should help.

/**
 * Function for the header's drama!
 **/
var lastScrollTop = 0;
var originalHeaderPosition = $(".header-menu-container-nav").offset().top;
$(window).bind('scroll', function () {

    //alert("OriginalHeaderPosition: "+originalHeaderPosition); //check

    var scrollTop = $(this).scrollTop();
    var vph = $(window).height();
    //alert("Viewport Height:"+vph+"\nDocument Height:" + $(document).height()); //check

    var currentHeaderPosition = $(document).scrollTop(); //this is same as scrollTop. Fix them later
    var deltaHeaderPosition = currentHeaderPosition - originalHeaderPosition;
    console.log("deltaHeaderPosition: " + deltaHeaderPosition);

    if (scrollTop >= lastScrollTop) { // downscroll code
        if (deltaHeaderPosition >= vph) {
            $('.header-menu-container-nav').addClass('sticky');
            $('.header-menu-container-nav').animate({
                opacity: 1
            });
        }
    } else { // upscroll code
        if ($('.firstPage').visible(true)) {
            console.log("visible");
            $('.header-menu-container-nav').animate({
                opacity: 0
            }).promise().always(function () {
                $('.header-menu-container-nav').attr('style', '');
                $('.header-menu-container-nav').removeClass('sticky');
            });
        }
    }
    lastScrollTop = scrollTop;
});

来源：https://stackoverflow.com/questions/29517645/jquery-visible-plugin-using-element-visibletrue-but-still-returns-true-on

标签

jquery

jquery-plugins

visible