在移動設備上滾動時屏幕頂部的平滑鎖元素

我正在嘗試平滑一個我已添加到正在開發的wordpress主題的小功能。我能夠滾動（僅當窗口是像素300和500之間的寬）由於這些兩個Q &如從堆棧溢出之後鎖定導航到屏幕的頂部：在移動設備上滾動時屏幕頂部的平滑鎖元素

Fix object to top of browser window when scrolling

和

How can I fix this element to stick at the top of the page on scroll?

的問題是，如果你在移動設備上瀏覽我的網站（digitalbrent.com）（我使用的是iPhone 4），當你向下滾動，你會發現，導航圖標鎖定的頂部屏幕，但是你必須停止滾動fo導航顯示在頂部。我想修復它，以便即使在用戶正在滾動時，導航也會真正平滑地停止在頁面的頂部，而不必等到用戶停止滾動後才顯示在頂部。任何人都可以向我指出我如何去做這件事的正確方向？比.scroll有更好的功能嗎？任何幫助或建議，不勝感激。下面是我使用的導航鎖定在屏幕的頂部代碼：

的jQuery：

$(function() { 
      var max_scroll = $("#nav").position().top; 
      $(document).ready(function() { 
       $(window).scroll(function() { 
        var navAdjust = $(".navScroll"); 
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
        if (scrollTop > max_scroll && !navAdjust.is(".navScrollFixed")) { 
         navAdjust.addClass("navScrollFixed"); 
        } 
        else if (scrollTop < max_scroll && navAdjust.is(".navScrollFixed")) { 
         // console.log("return to normal"); 
         navAdjust.removeClass("navScrollFixed"); 
        } 
       }); 
      }); 
     });

CSS：

#nav.navScrollFixed{ 
    position:fixed; 
    top: 0; 
    z-index: 100; 
    background: black; 
    border-bottom: 5px solid #27f231; 
    width: 100%; 
    left: 0; 
    margin-left: 0px; 
    margin-top: 0px; 
}

HTML：

<div id="nav" class="navScroll"> 
       <ul> 
        <li id="home"> 
         <div class="navIcon"></div> 
         Home 
        </li> 
        <li id="blog"> 
         <div class="navIcon"></div> 
         Blog 
        </li> 
        <li id="resume"> 
         <div class="navIcon"></div> 
         Resume 
        </li> 
        <li id="portfolio"> 
         <div class="navIcon"></div> 
         Portfolio 
        </li> 
        <li id="lab"> 
         <div class="navIcon"></div> 
         &nbsp;Lab&nbsp; 
        </li> 
        <li id="contact"> 
         <div class="navIcon"></div> 
         Contact 
        </li> 
       </ul> 
      </div>

重申一遍，代碼正在工作，我只想在移動設備上進行平滑處理。

來源

2013-06-03 Digital Brent

您是否找到了答案？ – JDavies

沒有...仍然試圖找出這一個。 –

好的，我會繼續做一些研究，並讓你知道我是否想到任何事情。只是不確定這些元素是否可能到達視圖端口的頂部。 – JDavies

我相信，iPhone和iPad上的移動Safari不會觸發onScroll事件，直到滾動停止後。因此，一旦用戶滾動，任何用於調整css的腳本都將不會執行，直到它們停止滾動爲止。此外，它不會在滾動時持續觸發任何事件。另一方面，Android會在滾動時立即和不斷地觸發事件。這是更快的響應，但可以使任何基於捲動的處理陷入困境，因爲它正以每秒約60次的速度發射。

來源

2014-02-06 18:19:56

在移動設備上滾動時屏幕頂部的平滑鎖元素

回答

相關問題