jQuery和Safari的一個問題

我正在嘗試創建一個導航欄，當用戶向下滾動時向上和向下滑動屏幕，然後當用戶停止滾動/向上滾動時向下滾動。下面是我的腳本的片段和的jsfiddle：jQuery和Safari的一個問題

$(document).ready(function() { 

var position = $(window).scrollTop(); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll > position) { 
      $('.nav').addClass('active'); 
     } else { 
      $('.nav').removeClass('active'); 
     } 
     position = scroll; 
    }); 
});

https://jsfiddle.net/z2uc89sL/

再加上我的CSS這適用於所有我在測試它除了Safari瀏覽器（我運行9.0版瀏覽器的罰款。 2在Mac上）。正在發生的問題是，當您點擊頁面頂部並且沒有更多空間可以向上滾動時，導航會通過重新滑動而再次隱藏（就好像用戶實際上再次向下滾動，而不是碰到頂端的頁面）。相反的情況也發生在頁面的底部。

如果你看看Safari中的小提琴，你會看到我正在談論的問題。如果你在任何其他瀏覽器中看小提琴，你會看到我想要實現的。

來源

2016-01-23 danMad

下面我想給你提供兩個不同的答案，而第二個是相同的功能的功能仿真首先解決是關係到你的.nav類。所以，它可以被重用。

var el = $(".nav"); 
$(window).scroll(function() { 
    el.addClass('active'); 
    clearTimeout($.data(this, "scrollCheck")); 
    $.data(this, "scrollCheck", setTimeout(function() { 
     el.removeClass('active'); 
    }, 250)); 
}); 

/* 
* As a Function 
*/ 
function scrollFunc(el) { 
    var el = el; 
    $(window).scroll(function() { 
     el.addClass('active'); 
     clearTimeout($.data(this, "scrollCheck")); 
     $.data(this, "scrollCheck", setTimeout(function() { 
      el.removeClass('active'); 
     }, 250)); 
    }); 
} 
scrollFunc($('nav'));

要在網上看到的結果，請看看我的小提琴https://jsfiddle.net/yeoman/g19nejfu/1/我叉你的問題，並與工作回答更新。

我想解釋一下發生了什麼，但實際上這個問題已經以某種方式回答了。所以，爲此，我會分享一些有用的鏈接。人們應該檢查出來了解它。

jQuery scroll() detect when user stops scrolling

http://gabrieleromanato.name/jquery-check-if-users-stop-scrolling/

希望我的答案你。謝謝，乾杯！

來源

2016-01-26 13:03:03 Danish

謝謝你。你拯救了我的生命:) – danMad

@DanMad非常高興聽到這個消息。讓我知道，如果你需要任何進一步的幫助來理解上述答案，甚至任何其他事情！乾杯:) – Danish

這是因爲safari中的彈跳效果。

你可以通過一些擴展如iNoBounce來禁用它。

或簡單地比較一下當前位置。

if (scroll > position && position > 0) { 
    $('.nav').addClass('active'); 
} else if (position < $(window).height()){ 
    $('.nav').removeClass('active'); 
}

來源

2016-01-26 05:33:57 emil

jQuery和Safari的一個問題

回答

相關問題