I’m making a website and I just styled my homepage.
But now I want to add some JS code to it. I want to have a sticky background at a certain point (when my header disappears, when the the top of the section hits the top of the page). And I tried some different codes but nothing works. These are my current html, css and js codes for the background:
HTML:
<body>
<header class="main-header home-header">
<div class="header-nav ">
<nav class="navbar nav navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<img class="logo" src="./zanzi images/logo.png">
<button class="navbar-toggler btn-header" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="store.html">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Social Media
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.youtube.com/shorts/uk-a74Q0380" target="_bank"><img class="footer-slogo" src="zanzi images/finalytlogo.png">youtube</a></li>
<li><a class="dropdown-item" href="https://www.instagram.com/semvandergucht/?next=%2F" target="_bank"><img class="footer-slogo" src="zanzi images/finaliglogo.png">instagram</a></li>
<li><a class="dropdown-item" href="https://open.spotify.com/user/31pjmsu3rstkpfzzmn6qrdvzp3hm" target="_bank"><img class="footer-slogo" src="zanzi images/finalsflogo.png">spotify</a></li>
</ul>
</li>
</ul>
</div>
<div class="cart"><i class="fa-solid fa-cart-shopping"></i><p id="count">0</p></div>
</div>
</nav>
</div>
<h1 class="brand-name">Pizza Zanzi</h1>
</header>
<section class="home-page-section" id="background-section">
<div class="home-page-bg"></div>
<div class=" card home-page-info">
<h2 class="section-header info-header
">Contact</h2>
<div class="info-item info-location">
<span class="location icon"><i class="fa-solid fa-location-dot"></i></span>
<span class="text loc-1">
<div>Gravenboush 260 </div>
<div class="loc-2">2348 Peperoni, Zanzibar</div>
</span>
</div>
<div class="info-item info-phone">
<span class="phone icon"><i class="fa-solid fa-phone"></i></span>
<div class="text phn-2">+32 468 58 43 24</div>
</div>
<div class=" info-item info-times-header">
<span class="clock icon"><i class="fa-regular fa-clock"></i></span>
<h5 class="info-times-title text">Openingsuren</h5>
</div>
<div class=" info-times">
<div>
<span class="day">Maandag</span>
<span class="dots">.....................</span>
<span class="time">19:00- 04:00</span>
</div>
<div>
<span class="day">Dinsdag</span>
<span class="dots">.....................</span>
<span class="time">GESLOTEN (wegens fartdag)</span>
</div>
<div>
<span class="day">Woensdag</span>
<span class="dots">.....................</span>
<span class="time">22:00- 23:00 (zanzi-special beschikbaar)</span>
</div>
<div>
<span class="day">Donderdag</span>
<span class="dots">.....................</span>
<span class="time">19:00- 04:00</span>
</div>
<div>
<span class="day">Vrijdag</span>
<span class="dots">.....................</span>
<span class="time">19:00- 04:00</span>
</div>
<div>
<span class="day">Zaterdag</span>
<span class="dots">.....................</span>
<span class="time">19:00- 04:00</span>
</div>
<div>
<span class="day">Zondag</span>
<span class="dots">.....................</span>
<span class="time">24u open!</span>
</div>
</div>
</div>
</div>
</section>
CSS:
.main-header{
background-color: rgba(0, 0, 0, .4);
background-image: url("zanzi images/headerimg2.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 5px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.home-page-section {
position: relative;
margin-top: 273px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 5em;
}
.home-page-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('zanzi images/zanzi-bg³.jpg');
opacity: 0.7;
background-size: cover;
z-index: -1;
}
.home-page-info {
position: relative;
z-index: 1;
background-color: rgba(237, 237, 237, 0.5);
}
.card.home-page-info{
margin: 0 auto;
width: 750px;
padding-top: 4em;
padding-bottom: 7em;
}
.sticky .home-page-bg{
position: fixed;
top: 275px; /* set this value to the height of your header */
}
JS:
var header = document.querySelector("header");
var section = document.querySelector("#background-section");
var background = document.querySelector(".home-page-bg");
var sectionOffsetTop = section.offsetTop;
function setSectionPosition() {
if (window.pageYOffset >= sectionOffsetTop - header.offsetHeight) {
section.classList.add("sticky");
background.style.top = header.offsetHeight + "px";
} else {
section.classList.remove("sticky");
background.style.top = "0";
}
}
window.addEventListener("scroll", setSectionPosition);
window.addEventListener("resize", function () {
sectionOffsetTop = section.offsetTop;
setSectionPosition();
});
So I tried using chatgpt, he gave some good code but it wouldn’t work, the background stayed absolute. Actually the result should be: The backgroud is absolute when I scroll down untill the header disappears (or the section reaches the top of the page), when this happens the background should be sticky (the other elements of that section shouldn’t be changed, stay absolute). And when the header appears again by scrolling up, the background is absolute again.
I think this is very easy to do, I’m surprised this takes so long.
Hopefully someone finds the solution.