My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar to remain visible not only in the yellow section, but across all sections of the website - yellow, green, or blue.
$('.links a[href^="#"]').click(function (event) {
event.preventDefault();
const section = document.querySelector(event.target.getAttribute("href"));
section.scrollIntoView({
behavior: "smooth"
});
})
$(document).scroll(function () {
$("nav").toggleClass("sticky", window.scrollY > 0);
});body{
margin: 0;
box-sizing: border-box;
}
nav.sticky{
background-color: blue;
border-bottom: 10px solid black;
}
nav img{
width: 10vh;
}
nav.title-bar{
background-color: red;
display: block;
position: sticky;
top: 0;
width: 100%;
transition: 0.5s;
height: 50vh;
z-index: 10000;
color: white;
nav.title-bar > *{
padding: 20vh;
}
}
#first{
background-color: yellow;
}
#second{
background-color: green;
}
#third{
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="first">
<nav class="title-bar">
<div class="logo">
<img src="https://picsum.photos/200" alt="logo" id="logo">
<h1 id="title"><a href=".">My Website</a></h1>
</div>
<div class="links">
<a href="#first" class="selected">First</a>
<a href="#second">Second</a></label>
<a href="#third">Third</a></label>
</div>
</nav>
<div class="div-1">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel mollitia tempora labore, ad laboriosam modi recusandae ipsam tempore quasi tenetur, veritatis, alias pariatur qui doloremque accusamus temporibus doloribus porro aperiam?</p>
<img src="https://picsum.photos/200/300">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At maiores sunt voluptatum quas laboriosam, ducimus nesciunt ipsa quis, ullam rerum ipsam consectetur aperiam, mollitia totam aliquid sit exercitationem eius facilis?</p>
<img src="https://picsum.photos/200/301">
</div>
</section>
<section id="second">
<div class="div-2">
<img src="https://picsum.photos/200/302">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
</div>
<div class="div-3">
<img src="https://picsum.photos/200/303">
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
</div>
</section>
<section id="third">
<div class="div-2">
<img src="https://picsum.photos/200/302">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
</div>
<div class="div-3">
<img src="https://picsum.photos/200/303">
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
</div>
</section>
</body>
</html>