Javascript 将桅杆头背景固定在过卷上 问题

我在页面顶部有一个简单的全宽报头，上面有一个非固定的背景图像（即，

背景附件：滚动

）和一点标题文本。看起来一切正常，但当用户向上“溢出”时，“溢出”为白色。为了解决这个问题，我想在用户执行此操作时固定背景的位置，以便内容向下移动，但背景保持不变

示例代码

index.html

为什么

overscroll-behavior-y:none

不行 首先，Safari/WebKit还不支持此功能，但我也认为这感觉有点咄咄逼人。我非常喜欢overscroll的感觉，我希望在保持UI外观整洁的同时保留它

怪癖 当我自己尝试这样做时，我发现添加

背景附件：fixed

属性稍微移动了图像的位置。此外，即使背景固定，报头也不会延伸到溢出区域，因此其背景仍为白色

我正在使用

• SCSS

• jQuery

• bootstrap

---

您正在尝试修复桅杆头，而过卷的主体会产生橡皮筋效果。我不得不在iphone5c上测试这一点，因为如果你没有运行OSX，桌面浏览器不会过度浏览，所以请记住，这些结果仅限于较旧版本的iOS（10.左右）。以下是我的发现：

错误的解决方案：更改窗口滚动上的CSS 您可以将事件侦听器添加到窗口滚动事件中，并在用户滚动到顶部时（即，

window.scrollY

属性为负值时）修复报头的位置：

CSS

正文{
保证金：0；
填充：0；
}
桅顶{
溢出：自动；
/*将此div移动到gpu处理的层*/
-webkit transform:translate3d（0，0，0）；/*对于iOS，感谢您提出的问题。您是否介意添加一点代码，以便我们可以查看您的文档和SCS的结构？@Queder谢谢，刚刚更新。
<div class="masthead">
  </div class="container">
    <h1>Hello, World</h1>
    <p>Lorem ipsum dolor</p>
  </div>
</div>

/*...*/
.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;
}
/*...*/

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%;
}

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";
    }
}