iOS上不那么糟糕的粘性导航？答案

【问题标题】：A less lousy sticky nav on iOS?iOS上不那么糟糕的粘性导航？
【发布时间】：2013-05-31 11:23:51
【问题描述】：

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

我的脚本也很简单：

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 毫秒运行一次，或者有什么其他方法可以让整个体验不那么令人沮丧？

谢谢

【问题讨论】：

标签： jquery ios navigation nav sticky

【解决方案1】：

在 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 */
}

【讨论】：

【解决方案2】：

这行不应该：

position: sticky /* future compatibility */

有分号吗？

position: sticky; /* future compatibility */

【讨论】：

这不应该作为答案发布。您应该对原始答案发表评论，说明他们错过了position: sticky 之后的分号。