Question

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

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），当您向下滚动时，您会注意到导航图标锁定在屏幕，但您必须停止滚动才能使导航显示在顶部。我想修复它，以便即使在用户主动滚动时，导航也会在页面顶部非常顺利地停止，而不必等待用户在它出现在顶部之前停止滚动。任何人都可以指出我如何做到这一点的正确方向？是否有比.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>

重申一下，代码正在运行，我只想在移动设备上解决它。

Answer 1

我认为iPhone和iPad上的移动Safari不会在滚动停止之后触发onScroll事件。因此，用户滚动后调整css的任何脚本在停止滚动之前都不会执行。此外，滚动时不会连续触发任何事件。另一方面，Android会在滚动时立即和不断地触发事件。这种响应速度更快，但是可以让任何基于滚动的处理功能陷入困境，因为它每秒被发射约60次。

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

1 个答案: