javascript - 仅当我向下滚动时淡入

Question

我正在使用此代码片段使元素淡出 if scrolltop是 > 750 并在 < 时淡入750.它工作正常，但我希望它在向上滚动时(淡出后)保持不可见，直到用户到达页面顶部。

所以，这就是当前正在发生的事情:元素默认可见，用户滚动 750，它就会淡出。用户到达页面末尾，向上滚动，当到达 750 时，元素淡入。

var $window = $(window);
var $freccia = $('#freccia1');

function showHideFreccia() {
   var availableScroll = $(document).height() - $window.height(),
       scrollTop = $window.scrollTop();

   if( scrollTop < 750 || scrollTop  == availableScroll) {
        $freccia.fadeIn("slow", function() {
        });
   } else {
        $freccia.fadeOut("slow", function() {
        });
   }
}

showHideFreccia();
$window.scroll(showHideFreccia);

应该改变的是:元素默认可见，用户滚动 750，它就会淡出。用户到达页面末尾，向上滚动，当到达页面顶部时，元素淡入。

我尝试过这个，但它不起作用(不再淡入/淡出):

var $window = $(window);
var $freccia = $('#freccia1');

function showHideFreccia() {
   var availableScroll = $(document).height() - $window.height(),
       scrollTop = $window.scrollTop();

   if ( scrollTop > 750 || scrollTop  == availableScroll) {
        $freccia.fadeout("slow", function() {
        });
   }
   if ( scrollTop < 1 || scrollTop  == availableScroll) {
        $freccia.fadein("slow", function() {
        });
   }
}

showHideFreccia();
$window.scroll(showHideFreccia);

Answer 1

您的第二个代码段工作正常，您只是使用了fadein和fadeout而不是fadeIn和fadeOut>，一个常见的错误!

这段代码对我来说工作得很好: JSFiddle

var $window = $(window);
var $freccia = $('#freccia1');

function showHideFreccia() {
   var availableScroll = $(document).height() - $window.height(),
       scrollTop = $window.scrollTop();

   if ( scrollTop > 750 || scrollTop  == availableScroll) {
        $freccia.fadeOut("slow", function() {
        });
   }
   if ( scrollTop < 1 || scrollTop  == availableScroll) {
        $freccia.fadeIn("slow", function() {
        });
   }
}

showHideFreccia();
$window.scroll(showHideFreccia);

编辑:

不确定这是否是您想要发生的情况，但当前代码将在您到达页面末尾时再次显示该元素。您只需删除 || 即可解决此问题第二个if语句中的scrollTop == availableScroll(如果根本不需要，也可以从第一个语句中删除)。