4

我的目标相当简单而且不太花哨：当用户向下滚动页面时，希望将辅助导航栏设置在屏幕顶部的固定位置。

我的脚本也很简单：

var stickySubnavTop = $('#subnav').offset().top;  

    var stickySubnav = function(){  
        var scrollTop = $(window).scrollTop();  

        if (scrollTop > stickySubnavTop-28) {   
            $('#subnav').addClass('sticky');  
        } else {  
            $('#subnav').removeClass('sticky');   
            }  
    };  

    stickySubnav();  

    $(window).scroll(function() {  
    stickySubnav();  
    });

在所有桌面浏览器上都像魅力一样工作，在 iOS 上则不然。现在，事情是这样的：我完全意识到 iOS 在滚动时会冻结 DOM。尽管如此，我想知道是否有任何方法可以使效果感觉不那么突然。

在寻找答案时，我遇到了一些我不熟悉的触摸事件。监听事件特别引起了我的touchmove注意，我想我可以尝试让我的脚本运行它：

$(document).on('touchmove', function() {
       stickySubnav; 
    });

这样做是在用户滚动并同时将手指放在屏幕上时运行脚本。当他们用惯性启动滚动时它不起作用，但仍然足以使效果更平滑，因为页面的内容使得用户不太可能快速滚动。

问题是：以这种方式运行该脚本会使旧手机上的滚动有点不稳定。我发现 A5 级处理器可以很好地处理它，但是任何功能更弱的处理器都无法在保持完美流畅的滚动体验的同时处理它。

我的问题是：有什么方法可以让脚本每 X 毫秒运行一次，或者有什么其他方法可以让整个体验不那么令人沮丧？

谢谢

4

2 回答 2

3

在 iOS 6+ 上，尝试 CSS3 粘性位置：

/* 
 * same as position:relative as long as the element is more than 28px 
 * from the top of the viewport.  Then, it is the same as position: fixed 
 */
#subnav {
    position: -webkit-sticky;
    position: sticky /* future compatibility */
    top: 28px; /* viewport top threshold */
}
于 2013-06-19T22:09:06.687 回答
-2

这行不应该：

position: sticky /* future compatibility */

有分号吗？

position: sticky; /* future compatibility */

于 2015-08-15T20:15:24.100 回答