iOS上不那麼糟糕的粘性導航？

我的目標非常簡單，並不太花哨：當用戶向下滾動頁面時，希望將輔助導航欄設置在屏幕最上方的固定位置。iOS上不那麼糟糕的粘性導航？

我的劇本也很簡單：

var stickySubnavTop = $('#subnav').offset().top; 

    var stickySubnav = function(){ 
     var scrollTop = $(window).scrollTop(); 

     if (scrollTop > stickySubnavTop-28) { 
      $('#subnav').addClass('sticky'); 
     } else { 
      $('#subnav').removeClass('sticky'); 
      } 
    }; 

    stickySubnav(); 

    $(window).scroll(function() { 
    stickySubnav(); 
    });

的工作原理是對所有桌面瀏覽器魅力，與其說是iOS上。現在，這是事情：我完全知道iOS滾動時凍結了DOM。但是，我想知道是否有任何方法可以使效果不那麼突兀。

在尋找答案時，我遇到了一些我不熟悉的觸摸事件。特別是touchmove聽音事件引起了我的注意，我想我可以試着讓我的腳本來運行它：

$(document).on('touchmove', function() { 
     stickySubnav; 
    });

這樣做是運行腳本當用戶滾動同時保持他們的手指上屏幕。當它們以慣性啓動滾動時它不起作用，但仍然足以使效果更平滑，因爲頁面的內容使得用戶不太可能快速滾動。

問題是：以這種方式運行該腳本會使舊手機上的滾動有點波動。我發現A5級處理器可以很好地處理它，但任何功能較弱的處理器都無法處理它，同時保持完美平滑的滾動體驗。

我的問題是：有什麼辦法可以告訴腳本每X毫秒只運行一次，或者讓整個體驗更輕鬆一點？

感謝

來源

2013-05-31 Tom S.

在iOS 6+，嘗試CSS3粘位置：

/* 
* same as position:relative as long as the element is more than 28px 
* from the top of the viewport. Then, it is the same as position: fixed 
*/ 
#subnav { 
    position: -webkit-sticky; 
    position: sticky /* future compatibility */ 
    top: 28px; /* viewport top threshold */ 
}

來源

2013-06-19 22:09:06

-2

不應該在該行：

position: sticky /* future compatibility */

有分號？

position: sticky; /* future compatibility */

來源

2015-08-15 20:15:24

這不應該被張貼爲答案。你應該對原始答案留下評論，說明他們錯過了「位置：粘性」之後的分號。 – IKavanagh

iOS上不那麼糟糕的粘性導航？

回答

相關問題