javascript - 滚动 safari bug 上元素的增长高度

Question

我有一个高度为 200 像素的固定标题 div。在滚动时，高度会降低，直到达到一定高度(40px)。一旦用户到达内容容器，这会产生标题变成固定标题的效果。

这在 Firefox 和 Chrome 中运行顺利，但是，Safari 却有问题。特别是，当用户向上滚动并且标题高度增加时。 See JS Fiddle here .

$(window).scroll(function () {
    var $scrollTop     = $(window).scrollTop(),
        $element        = $('.content-container').offset().top,
        $distance      = ($element - $scrollTop);

    if ($scrollTop < $element - $newHeight) {
          header.height($distance);
       } 
});

是什么导致 safari 在高度增加时出现如此多的故障？我该怎么做才能解决这个问题？

Answer 1

在 Safari 中消除这种效果的方法是一起改变方法。不要在滚动时更改标题的高度，而是使内容容器 position:relative; 并设置更高的 z-index。然后，当滚动到达标题底部(或任何你想让标题变粘的点)时，将标题的 z-index 更改为高于内容容器并设置它的高度到你想要的尺寸。

这是JS。请看this JS Fiddle for demo以及其余代码(css、html)。

$(window).scroll(function () {
    if ($scrollTop > $element - $newHeight) {
        header.height($newHeight).css("z-index", 1000);
    } 
    else {
        header.css("z-index", 100).height($oldHeight);
    }
});

另外，考虑使用 requestAnimationFrame而不是滚动。它的重量会更轻。