jquery-visible插件:使用`element.visible(true)`-但仅在“整个"返回时才返回true.元素是可见的.为什么?

问题描述

JsFiddle在这里！

JsFiddle here!

来自此文章，

$('#element').visible()

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

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 )

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

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.

但是问题在于只要ENTIRE .firstPage元素变为可见，它就不会执行(这意味着$('.firstPage').visible(true)不会返回true).为什么?我想念什么?

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;

});

推荐答案

第一个问题是您要重置lastScrollTop = 0; 内部滚动事件.测试scrollTop > lastScrollTop总是 为真(除非返回最顶端-位置0).

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).

一旦修复了下一个问题，即发生了多个fadeIn.您需要将不透明度设置为1动画，而不是使用fadeIn.使用动画意味着您不能依赖完成事件触发，因此我将其切换为使用jQuery动画队列promise和always来确保运行下一个代码.

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.

以下是我到目前为止提出的内容: http://jsfiddle.net/TrueBlueAussie/w7eowzcq/64/

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

我不能100％确定所需的行为，但这应该会有所帮助.

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

这篇关于jquery-visible插件:使用`element.visible(true)`-但仅在“整个"返回时才返回true.元素是可见的.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！