Question

我使用此代码段在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

您可以使用此脚本在滚动顶部应用：

var detectScroll = function (_event) {
    var event = window.event || _event; // old IE support
    var direction = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    return direction;
   };

function showHideFreccia(e) {
    var dir = detectScroll(e);
    //...
    if ( dir == 1 || scrollTop  == availableScroll) {
        // your action
    }
}
// and into your scroll event
$window.scroll(function(e) {
    showHideFreccia(e);
});

Source

如果它将返回1，则表示您向上滚动然后执行fadein操作。 -1我的意思是滚动到底部

Answer 2

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

这段代码对我来说很好： 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来解决此问题（如果根本不需要它，也可以从第一个语句中删除它。）

只有当我向下滚动时才会出现f ..

2 个答案: