在移动设备上滚动时，将锁定元素平滑化到屏幕顶部 _分页

我正在尝试简化我添加到正在开发的wordpress主题中的一些功能。滚动后, 我能够将导航锁定到屏幕顶部(仅当窗口宽度在300到500像素之间时), 这归功于堆栈溢出的以下两个问答：
滚动时将对象固定到浏览器窗口顶部
和
如何修复此元素使其停留在滚动页面的顶部？
【在移动设备上滚动时，将锁定元素平滑化到屏幕顶部】问题是, 如果你在移动设备(我正在使用iphone 4)上查看我的网站(digitalbrent.com), 则向下滚动时会注意到导航图标锁定在屏幕顶部, 但是停止滚动以使导航显示在顶部。我想对其进行修复, 以便即使用户正在积极滚动时, 导航也将真正平滑地停在页面顶部, 而不必等到用户停止滚动才显示在顶部。有人能指出我正确的方向吗？有没有比.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>

重申一下, 该代码正在运行, 我只想在移动设备上进行平滑处理。
#1我相信在滚动停止之前, iPhone和iPad上的移动浏览器不会触发onScroll事件。因此, 一旦用户滚动, 你拥有的任何用于调整css的脚本都不会执行, 直到他们停止滚动。此外, 它不会在滚动时连续触发任何事件。另一方面, Android在滚动时会立即并不断触发事件。这响应速度更快, 但由于每秒以约60次发射, 因此可以使基于滚动的任何处理陷入困境。