jquery-visible 插件：使用 `element.visible(true)` - 但仅当“整个”元素可见时仍返回 true。为什么？答案

【问题标题】：jquery-visible plugin: Using `element.visible(true)` - but still returns true only when the "entire" element is visible. Why?jquery-visible 插件：使用 `element.visible(true)` - 但仅当“整个”元素可见时仍返回 true。为什么？
【发布时间】：2015-04-09 21:28:15
【问题描述】：

JsFiddle here!

来自this article，

以最简单的形式，可以按如下方式检查元素：
$('#element').visible()
如果整个元素可见（即，如果该元素的任何部分在视口。将 true 传递给 'visible' 方法，将告诉插件如果元素的任何部分对用户可见，则返回 true 屏幕。
$('#element').visible( true )

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

但问题是只要整个.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;

});

【问题讨论】：

github.com/customd/jquery-visible/issues

标签： jquery jquery-plugins visible

【解决方案1】：

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

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

这是我目前想出的：http://jsfiddle.net/TrueBlueAussie/w7eowzcq/64/

我不是 100% 确定期望的行为，但这应该会有所帮助。

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

【讨论】：