jquery-visible插件：使用`element.visible（true）` – 但仅当“complete”元素可见时仍然返回true。 为什么？
JsFiddle在这里！
从这篇文章来看，
在最简单的forms中，可以按如下方式检查元素：
$('#element').visible()如果整个元素是可见的，则此方法将返回true（即，如果该元素的任何部分位于视口之外，它将返回false。将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; });
第一个问题是你要重置lastScrollTop = 0; 在滚动事件中。 测试scrollTop > lastScrollTop将始终为true（除非您返回到极限顶部 – 位置0）。
一旦你解决了下一个问题就是多个fadeIn 。 您需要将不透明度设置为1而不是使用fadeIn。 使用animate意味着您不能依赖于完成事件触发，因此我将其切换为使用jQuery动画队列promise并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; });