Заголовок обрезает верхнее изображение во время прокрутки параллакса - PullRequest
Новая
       25

Заголовок обрезает верхнее изображение во время прокрутки параллакса

0 голосов
/ 25 апреля 2020

twintowers Я создал фиксированный заголовок, используя JS на своем сайте, но этот заголовок теперь обрезает верх моего первого изображения. Я также использую параллакс-скроллинг. Вот мой код:

Вот 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 ниже, чтобы заголовок не обрезал его (или вместо этого отобразил полное изображение)?

1 Ответ

1 голос
/ 25 апреля 2020

Как это? 

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>
...