Если нужно полностью зафиксировать, то можно обойтись обычным background-attachment: fixed;
*{
margin: 0;
padding: 0;
}
.header{
height: 300px;
background: url('https://www.pastinfo.am/news_images/249/745971_2/f5badf7fabcb6b_5badf7fabcba8.jpg');
background-position: center top;
background-attachment: fixed;
}
.content{
background: #fff;
padding: 20px 20px 500px;
}
<div class="header"></div>
<div class="content">
text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content
</div>
Если нужно, чтобы предыдущий блок тоже двигался, но медленнее, то можно менять ему top
, translateX
или background-position
при прокрутке в зависимости от величины прокрутки
const header = document.querySelector('.header');
document.addEventListener('scroll', () => {
header.style.top = document.documentElement.scrollTop/2 + 'px';
//header.style.transform = `translateY(${document.documentElement.scrollTop/2}px)`;
//header.style.backgroundPositionY = `${document.documentElement.scrollTop/2}px`;
});
*{
margin: 0;
padding: 0;
}
.header{
position: relative;
height: 300px;
background: url('https://www.pastinfo.am/news_images/249/745971_2/f5badf7fabcb6b_5badf7fabcba8.jpg');
background-position: center top;
}
.content{
position: relative;
background: #fff;
padding: 20px 20px 500px;
}
<div class="header"></div>
<div class="content">
text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content
</div>
Либо есть плагин parallax.js, там много возможностей - https://github.com/wagerfield/parallax