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

我正在尝试简化我添加到正在开发的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次发射, 因此可以使基于滚动的任何处理陷入困境。