js滾動平滑

Question

我真的對滾動事件有疑問。 我試着徹夜解決它，但我不能。

我正在嘗試在頂部粘貼導航。 當$(window).scrollTop()在導航之前傳遞點時，將執行操縱桿效果。

問題是，IE和Chrome上會出現“眨眼”效果（類似延遲過程）但Firefox上沒有。

在我的研究中，我知道Firefox默認情況下是“平滑滾動”。

但是，請在Chrome或IE上查看此示例

http://www.backslash.gr/demos/jquery-sticky-navigation/

就像在Firefox上一樣流暢，代碼就是那么簡單......

關鍵是，我正在做與此示例完全相同的事情，但為什么我有'眨眼'效果？

CSS上的技巧？

有沒有什么方法可以像js上的Firefox一樣創建一個流暢的scrool？

非常感謝您的幫助。

$(window).on('scroll', Sticky);

function Sticky(){
    $(this).scrollTop() > anchor.offset().top
    ? nav.css({ 'position': 'fixed', 
                      'z-index': z_index, 
                       top: y, 
                       left: x, })
    : nav.css({ 'position': 'static', });
};

Answer 1

查看不完整的示例代碼，很難確定發生了什么，所以請用完整的代碼更新您的問題，或者更好 - 上傳一個JSFiddle作為示例，我們可以通過必要的更改直接更新它。 到目前為止（基於我之前所說的），由於示例代碼中的拼寫錯誤，您看起來會出現flickering效果：

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   top: y, 
                   left: x, })
: nav.css({ 'position': 'static', });

在那里你不終止，需要加以應用（你用逗號結束它的CSS屬性和值的陣列, ），你也沒有在一個單引號括一些CSS屬性' 。 你的代碼應該是 ：

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   'top': y, 
                   'left': x })
: nav.css({ 'position': 'static' });

當然，如果你已經預先設置了變量z_index ， y和x 。

編輯和免責聲明：我用原始的演示代碼創建了一個新的JSFiddle 。 您提到的演示版權受版權保護，所以請將您的感謝歸功於原作者，而不是我，如果這可以幫助您。 我發布的JSFiddle代碼可以免費下載。 所以我想將它重用於演示目的也是可以的。 更改該代碼以符合您的要求，並在更新它時將其更新為新版本。 它可以幫助您跟蹤您做錯的地方（如果有的話）。 ;）

Answer 2

我想你可能會在這里混淆兩件事。

1. 查看您鏈接到的工作代碼。 如果你使用鼠標滾動滾動chrome或IE或firefox，那里就會閃爍。
2. 眨眼是因為你突然改變了位置。 嘗試更改js，使其為位置設置動畫，而不是突然改變其值。

正如其他人所說的那樣，鏈接到一個正常工作的代碼並通過展示一個技巧來期待答案可能無助於我們所有人。 嘗試在js的位置變化線上添加動畫，看看是否有幫助。

這里沒有訣竅。 它的全部代碼所以閱讀源和享受。