1

我目前正在开发一个网站的移动版本，该网站在主页顶部有一个导航菜单。我在这个导航菜单中使用 jquery 平滑滚动，这样当用户从菜单中选择一个主题时，它会很好地滚动到位于页面下方的特定项目。这非常有效，我对此没有任何问题。

但是，我还使用了我在这个网站上找到的一些代码，一旦用户滚动到某个点，导航菜单就可以固定在页面顶部。（在我的情况下为 160px）该代码在这里：

/* Dynamic top menu positioning
     *
     */

    var num = 160; //number of pixels before modifying styles

    $(window).bind('scroll', function() {
        if ($(window).scrollTop() > num) {
            $('.framecont').addClass('fixed');
        }
        else {
            $('.framecont').removeClass('fixed');
        }
    });

如果需要，这里是 .framecont 和 .fixed 的 CSS：

.framecont{
    background-color: #FFFFFF;
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
    box-shadow: 0 -55px 1px -7px #FFFFFF inset;
    color: #FFFFFF;
    overflow-x: scroll;
    padding-bottom: 3px;
    position: absolute;
    top: 110px;
    -webkit-overflow-scrolling:touch;
    width: 100%;
    z-index: 99;
    }

.fixed {
border-bottom: 5px solid grey;
border-top: 5px solid grey;
box-shadow: 0 0 30px #000;
padding-bottom: 10px;
padding-top: 5px;
position:fixed;
top:0;
}

当用户从导航菜单中选择一个项目时，jquery 平滑滚动启动，（以及上面的代码）并在滚动超过 160 像素后立即将菜单捕捉到页面顶部。这很棒。但是当用户在页面上手动滚动超过 160 像素时（使用他们的手指滚动而不是选择导航菜单项）在菜单出现固定在页面顶部之前会有很大的延迟。当用户手动将他/她的手指向下滑动页面时，滚动必须完全停止（并且用户必须将他/她的手指从屏幕上移开），然后菜单才会固定在页面顶部。

这种滞后是我要解决的问题。当用户手动滚动超过 160 像素时，我希望菜单立即固定在窗口顶部，就像用户选择导航菜单项并且 jquery 平滑滚动启动时一样。这可能吗？

如果您还没有弄清楚，那么我对 javascript 和一般编码非常陌生。这是我第一次在这个网站上提问，所以如果我没有以任何方式遵守适当的礼仪，我提前道歉。

4

0 回答 0