Question

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

我的脚本也很简单：

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

由于

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

Answer 2

不应该这一行：

['AA', 'eE', 'Gg']

有分号吗？

implode()

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

2 个答案: