Question

我目前正在开发一个网站的移动版本，该网站的主页顶部有一个导航菜单。我在这个导航菜单中使用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平滑滚动开始（以及上面的代码），并在滚动到达160px后立即将菜单捕捉到页面顶部。这很棒。但是当用户在页面上手动滚动超过160px时（使用他们的手指滚动而不是选择导航菜单项），在菜单显示在页面顶部固定之前存在显着延迟。当用户在页面上手动轻弹他/她的手指时，滚动必须完全停止（并且用户必须从屏幕上移除他/她的手指），然后菜单显示在页面顶部。

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

如果你还没有弄清楚，我对javascript和编码一般都很新。这是我第一次在这个网站上提问，所以如果我没有以任何方式遵守礼仪，我会提前道歉。

垂直移动滚动 - 固定导航菜单滞后

0 个答案: