jquery-visible plugin：使用 'element.visible(true)' - 但仅当"entire"元素可见时仍返回 true。为什么？

Question

JsFiddle here

从这篇文章中，

在最简单的形式中，元素可以按如下方式进行检查：

$('#element').visible()

如果整个元素可见（即。，如果该元素的任何部分在视口。将true传递给"visible"方法，将告诉插件如果元素的任意部分在用户上可见，则返回true屏幕

$('#element').visible( true )

在下面的脚本中，.firstPage div的一部分在滚动时在屏幕上可见时，if块if ( $('.firstPage').visible(true) ) ...就会立即执行

但问题是，只要ENTIRE .firstPage元素变为可见，它就不会被执行（这意味着$('.firstPage').visible(true)不会返回true）。为什么？我错过了什么

---

代码：

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

Answer 1

第一个问题是在滚动事件内重置lastScrollTop = 0;。测试scrollTop > lastScrollTop将始终为真（除非返回到最顶部位置0）。

一旦您解决了下一个问题，即出现多个fadeIn。您需要将不透明度设置为1的动画，而不是使用fadeIn。使用animate意味着您不能依赖于完成事件触发，所以我将其切换为使用jQuery动画队列promise和always，以确保运行下一个代码。

以下是我到目前为止的想法：http://jsfiddle.net/TrueBlueAussie/w7eowzcq/64/

我不能百分之百确定自己想要的行为，但这应该会有所帮助。

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