4

我正在尝试平滑我添加到我正在开发的 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>

重申一下，代码是有效的，我只想在移动设备上平滑它。

4

1 回答 1

0

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

于 2014-02-06T18:19:56.477 回答