在滚动野生动物园错误上增加元素的高度

【问题标题】：Grow height of element on scroll safari bug在滚动野生动物园错误上增加元素的高度
【发布时间】：2016-01-23 19:07:54
【问题描述】：

我有一个 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 在高度增加时出现如此多的故障？我该怎么做才能解决这个问题？

【问题讨论】：

标签： javascript jquery html css safari

【解决方案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。重量会更轻。

【讨论】：