Header 在视差滚动期间截断顶部图像

Question

我已经在我的网站上使用 JS 创建了一个固定的 header，但是 header 现在切断了我第一张图片的顶部。我也在使用视差滚动。这是我的代码：

这是HTML：

<head>
  <div class="header" id="myHeader">
    <h1>My Website</h1>
  </div>
</head>

<body>

  <div class="bgimg-1" ></div>

  <script src="./js/headerScroll.js">
  </script>
</body>

现在的JS(headerScroll.js):

window.onscroll = function() {
  myFunction()
};

let header = document.getElementById("myHeader");

let sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

最后 CSS:


.header {
  padding: 10px 16px;
  background: white;
  color: black;
  border: 1px solid black;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.sticky+.content {
  padding-top: 102px;
}

body,
html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/image1.jpg");
  min-height: 100%;
}

有没有办法将 bgimg-1 调低，这样 header 就不会切断它（或显示完整图像）？

Answer 1

像这样？

window.onscroll = function() {
  myFunction()
};

let header = document.getElementById("myHeader");

let sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

.header {
  padding: 10px 16px;
  background: white;
  color: black;
  border: 1px solid black;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.sticky+.content {
  padding-top: 102px;
}

body,
html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1 {
  position: relative;
  opacity: 0.65;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("https://www.howtogeek.com/wp-content/uploads/2019/08/img_5d5b215d04389.png");
  min-height: 100%;
}

<div class="header" id="myHeader">
  <h1>My Website</h1>
</div>

<div class="bgimg-1"></div>

Header 在视差滚动期间截断顶部图像

Header Is Cutting Off Top Image During Parallax Scrolling

javascript

html

css

parallax