Question

我有一个固定的标题div，高度为200px。滚动时，高度会降低，直到达到一定高度（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);
       } 
});

什么导致徒步旅行在高度增加时出现故障？我能做些什么来解决这个问题？

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而不是onScroll。它的重量会更轻。

在滚动safari bug上增加元素的高度

1 个答案: