在移动设备上滚动时更平滑的锁定元素到屏幕顶部答案

【问题标题】：Smoother Lock Element to Top of Screen When Scrolling on Mobile Devices在移动设备上滚动时更平滑的锁定元素到屏幕顶部
【发布时间】：2013-06-03 18:40:47
【问题描述】：

我正在尝试完善我添加到我正在开发的 wordpress 主题中的一个小功能。由于堆栈溢出的这两个问答，我能够在滚动后将导航锁定到屏幕顶部（仅当窗口宽度在 300 到 500 像素之间时）：

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?

问题是，如果您在移动设备（我使用的是 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>

重申一下，代码可以正常工作，我只想在移动设备上对其进行平滑处理。

【问题讨论】：

你找到答案了吗？
不...仍在尝试解决这个问题。
好的，我会继续做一些研究，如果我有什么想法告诉你。只是在元素到达视口顶部之前不确定是否有可能。
你在使用jquery移动框架吗？如果是这样，那么这个名为 scrollstart 的事件可能很有用。如果没有，好吧，还有很多其他的事情你可以做。查找位置：粘性；
我设法找到了一个在移动设备上运行良好的解决方案。我会尝试尽快发布答案。

标签： jquery css navigation scroll wordpress-theming

【解决方案1】：

我相信 iPhone 和 iPad 上的移动 Safari 直到滚动停止后才会触发 onScroll 事件。因此，一旦用户滚动，您拥有的任何调整您的 css 的脚本都不会在他们停止滚动之前执行。此外，它不会在滚动时连续触发任何事件。另一方面，Android 将在滚动时立即并不断地触发事件。这响应速度更快，但可能会使任何基于滚动的处理在手机上停滞不前，因为它以每秒约 60 次的速度被触发。

【讨论】：