Я приложил отрывок своей проблемы - в основном у меня есть липкий заголовок с прокруткой параллакса, который будет реализован позже, он выглядит хорошо, но когда я прокручиваю изображение вниз, сразу же появляется рывок. Это классический c Html липкий заголовок с фиксированным значением css и z-index = 999.
Я бы хотел, чтобы прокрутка была более плавной. Я заметил, что это только первый бит прокрутки (через изображение google в фрагменте), что он прерывистый, а не дальше вниз по странице.
Что мне нужно сделать, чтобы сделать этот процесс более плавным конечный пользователь?
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-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://www.howtogeek.com/wp-content/uploads/2019/08/img_5d5b215d04389.png");
min-height: 110%;
}
<div class="header" id="myHeader">
<h1>Decade3</h1>
</div>
<div class="bgimg-1"></div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">How can we help?</h3>
<p>Cupcake ipsum dolor. Sit amet marshmallow topping cheesecake muffin. Halvah croissant candy canes bonbon candy. Apple pie jelly beans topping carrot cake danish tart cake cheesecake. Muffin danish chocolate soufflé pastry icing bonbon oat cake. Powder cake jujubes oat cake. Lemon drops tootsie roll marshmallow halvah carrot cake.</p>
</div>