将标头广告背景修正为过度滚动

Question

问题

我的页面顶部有一个简单的全角标头，上面有一个非固定的背景图片（即background-attachment: scroll），上面有一些标题文字。一切看起来都很好，但是当用户向上“过度滚动”时，“溢出”为白色。为了解决这个问题，我想在用户执行操作时固定背景的位置，以使内容向下移动，但背景仍然保留。

示例代码

index.html

<div class="masthead">
  </div class="container">
    <h1>Hello, World</h1>
    <p>Lorem ipsum dolor</p>
  </div>
</div>

main.scss

/*...*/
.masthead {
  display: block;
  text-align: center;
  color: white;
  background-image: url('http://via.placeholder.com/1900x1250/ff6666/000000');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
/*...*/

为什么overscroll-behavior-y: none不做

首先，Safari / WebKit尚不支持此功能，但我也认为这有点激进。我非常喜欢过度滚动的感觉，我想保留这一点，同时仍然保持UI干净。

古怪

当我自己尝试进行此操作时，我发现添加background-attachment: fixed属性会稍微移动图像的位置。另外，即使背景固定，标头也不会延伸到溢出区域，因此背景仍然保持白色。

我正在使用

• SCSS
• jQuery
• bootstrap

Answer 1

您正在尝试在抬头过大的物体起橡皮筋作用的同时修复标头。我必须在iPhone 5C上进行测试，因为如果您未运行OSX，则桌面浏览器不会过度滚动，因此请记住，这些结果仅限于旧版本的iOS（10.something）。这些是我的发现：

错误的解决方案：更改窗口滚动条上的CSS

您可以在窗口滚动事件中添加事件侦听器，并在用户滚动到顶部（<{>} ，当window.scrollY属性为负时）固定标头的位置：

CSS

body {
    margin: 0;
    padding: 0;
}

.masthead {
    overflow: auto;
    /* move this div to a gpu-processed layer */
    -webkit-transform: translate3d(0, 0, 0); /* for iOS <8.1 */
    transform: translate3d(0, 0, 0);
}

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript

var masthead = document.querySelector(".masthead");
var mastheadHeight = masthead.clientHeight;
var topContentMargin = 16;
mastheadHeight += topContentMargin;

window.addEventListener("scroll", function(e) {
    fixMastheadOnOverscroll();
});

function fixMastheadOnOverscroll() {
    let overscrollingTop = window.scrollY < 0;
    if (overscrollingTop) {
        masthead.classList.add("fixed-top");
        document.body.style.marginTop = mastheadHeight + "px";
    } else {
        masthead.classList.remove("fixed-top");
        document.body.style.marginTop = "0px";
    }
}

代码分解

您可能会猜到，当用户过度滚动时，此代码会将标头固定在顶部。几分挑剔 点：

标头上的
• overflow: auto可以在不过度滚动时解决折叠边距的问题；
• 添加transform是一种已知的技巧，可以将元素提升到其自己的层并使用GPU进行渲染。滚动时是否会使标头的定位更快？我不知道，这只是一个建议。
• 过度滚动时在正文上添加边距使内容呈现在标头下方；如果不这样做，它只会在固定的标头下方呈现。
• 由于滚动时内容的顶部边缘会折叠，因此我们将其高度增加到身体的边缘，这样用户在身体恢复原位时就不会看到内容上下跳动。

为什么不好？

据我所知，滚动时触发DOM更改功能非常昂贵。 From Twitter's own dev team：

  

将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意。

事件侦听器几乎连续触发该功能。我认为，iOS due to Apple engineers making the callback fire only at the end of the scroll event上也可能有一些奇怪的行为。

好的解决方案

¯\ _（ツ）_ /¯

老实说，我不知道如何使用overscroll-behaviour-y来解决这个问题。您只能通过检测浏览器才能在iOS上使用上述丑陋的骇客。您可以进行一些性能改进：

• throttle the callback，但这可能会导致动作缓慢；
• 在margin-top中的另一个CSS类和use that class name on the body instead of changing the body style directly中硬编码标头的高度，但这会给您带来更少的灵活性。