Question

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }
});

如您所知，这显示了固定的导航。 CSS很好，定位很棒。但是我希望导航在397px以上变得可见，它没问题。

但是，当我开始滚动时，我希望导航淡入：

.fadeIn(500);

当用户开始停下来查看内容或其他内容时，我希望元素淡出

.delay(3000).fadeOut(350);

我相信这可以通过在第一个if语句中执行if语句来完成。但是，检查用户是否正在滚动并且上面的工作脚本似乎发生碰撞的脚本。

想法，有人吗？

Answer 1

如果我理解正确的话。如果导航高于397像素并且仅在其滚动时，您希望导航淡入...所以此功能将执行此操作。如果我误解了您的问题，请在评论中澄清

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));//Lets the timer know were scrolling

    //Hide/Show nav based on location
    var y = $(this).scrollTop();
    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }

    //TimeOut function that is only hit if we havent scrolled for 3 Seconds
    //In here is where you fade out the nav
    $.data(this, 'scrollTimer', setTimeout(function() {    
        $('#aboutNav.fixed').fadeOut();
        console.log("Haven't scrolled in 3s!");
    }, 3000));
});

1月23日根据您的评论更新

您可以将此添加到$(document).ready()功能

$("#elementID").hover(function(){ 
    //show here (mouse over)
    $("#elementToShow").show();
},function(){
    //Start timeout here, (mouse out)
    setTimeout(function() {
        $("#elementToHide").hide();
    }, 3000);
}

Answer 2

扩展Kierchon的答案：

由于没有真正的方法来判断用户何时完成滚动（即没有“完成滚动”的事件），您将不得不使用称为去抖动的事件延迟方法。

去抖基本上是设置超时以在将来运行某些代码（一个函数），如果再次调用调用去抖函数的事件，则清除并重置超时，重复执行此操作直到事件最终停止被调用。此方法是为了防止重复触发的事件（例如滚动和调整大小）仅在最终事件触发后执行，并且最终执行延迟（去抖动）代码。

以下是关于使用debouncing methods in JS的好文章。

只要我了解您的需求（我认为我做了） - Here's a JSBin with some working code

基于滚动淡入或淡出

2 个答案: