Sticky nav on scroll, extend nav width from center

Sticky nav on scroll, extend nav width from center - javascript

I've got a sticky navbar on scroll and I want to do two things when the navbar is "sticky" :
I want to expand the nav width to 100vw (or 100%) from the center but I don't know how to do it
I tried this :
.fixed-nav{
position:fixed;
top:0;
width:100vw;
}
Also I want the nav to be positionned top 0
So I tried something and here is what I got but as you can see the nav width isn't expanded from the center and when the nav is positionned to top 0 there's an animation I don't really want : https://jsfiddle.net/Kiiara/65txkcyv/6/

Altough your code is very messy. try using the following code for your 2 css selectors:
header{
position:absolute;
top:54px;
left:0;
right:0;
margin:auto;
transition: .3s;
z-index:500;
transform-origin: center;
transform: scaleX(0.95);
}
.heightHeader{
position:fixed;
top:0;
width:100vw;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
transform: scale(1);
}

The animation was becuase to transition which is solved in this code. I have removed all animations because you said you don't want it.
tranform-origin will expand width from center.
No need to chnage nav class becuase you are already changing header
See results in full page mode.
// Sticky nav on scroll
const header = document.querySelector('header');
const nav = document.querySelector('#main');
const topOfNav = header.offsetTop;
function stickyNav() {
if (window.scrollY >= topOfNav) {
// Navbar's height
header.classList.add('heightHeader');
} else {
header.classList.remove('heightHeader');
}
}
window.addEventListener('scroll', stickyNav);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
header {
position: absolute;
top: 54px;
left: 0;
right: 0;
margin: auto;
width: 95vw;
transform-origin: center;
z-index: 500;
}
.heightHeader {
position: fixed;
top: 0;
width: 100vw;
transform-origin: center;
}
nav#main {
height: 120px;
box-shadow: 0px 15px 30px #0000001A;
border-radius: 15px;
background-color: #fff;
display: flex;
align-items: center;
position: relative;
}
.fixed-nav .nav__menu {
margin-left: auto;
}
nav#main .nav__logo {
margin-left: 50px;
}
.nav__menu {
margin-left: auto;
display: flex;
}
.nav__menu .main-menu-item {
position: relative;
}
.main-menu-item:not(:last-child) {
margin: 0 44px;
}
.main-menu-item:last-child {
margin-left: 44px;
margin-right: 342px;
}
.main-menu-item a {
font-weight: lighter;
font-size: 14px;
letter-spacing: 2.8px;
}
section div {
height: 400px;
width: 300px;
background: skyblue;
}
<header>
<nav id="main">
<div class="nav__logo">LOGO</div>
<ul class="nav__menu">
<li class="main-menu-item">One</li>
<li class="main-menu-item">Two</li>
<li class="main-menu-item">Three</li>
<li class="main-menu-item">Four</li>
<li class="main-menu-item">Five</li>
</ul>
</nav>
</header>
<section>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est maiores debitis vel quam assumenda sunt harum, repellendus magnam in libero eveniet quibusdam soluta nobis molestias! Voluptates temporibus eius veritatis. Id.
Eius nesciunt iure earum, assumenda aliquid aut! Quasi animi esse repudiandae sint ullam iusto inventore vero fugit officiis magni tempora, optio accusantium nobis libero, hic aspernatur impedit sapiente veniam numquam?
Ex fugiat expedita hic id. Quibusdam assumenda natus, totam cum eos veniam esse! Officia, magnam itaque quisquam rem maxime eius voluptatem facilis quas, quidem est, eaque optio corporis exercitationem voluptate!
Esse, modi? Eligendi eum, magni sunt voluptates dolor vel sapiente asperiores obcaecati similique eius nulla iste eveniet neque natus possimus inventore quas nobis alias assumenda excepturi? Repudiandae deleniti voluptatem dicta.
Accusamus impedit quasi at autem eos, molestiae beatae mollitia. Magnam labore ea quis facilis. A cupiditate minus, error maxime ullam fugiat quam numquam dicta quidem tempore labore veniam optio magnam?
Odio ullam perspiciatis qui recusandae officiis voluptatibus nisi dolore ad sequi maxime, iusto nostrum assumenda, repellendus est ab quas soluta dolorem, voluptate quam eos delectus. Laborum, laboriosam harum. Pariatur, aspernatur!
Deleniti commodi illum minima dolorum animi. Qui, exercitationem architecto sunt molestiae assumenda, reiciendis quaerat at iusto earum nulla porro officia? Animi possimus, tempore maxime libero esse labore quam minima ipsa?
Totam earum illo molestias inventore unde veritatis officia, quia modi impedit nisi odio ducimus voluptatibus itaque explicabo est neque accusamus fuga, laudantium autem debitis nulla minus ab? Nesciunt, natus fugiat.
Perspiciatis suscipit obcaecati veniam in praesentium earum repellat iste amet fuga voluptate, nesciunt, quisquam necessitatibus molestiae natus rerum itaque incidunt. Officiis consectetur voluptatem non beatae sequi inventore nihil adipisci iure!
Provident ab excepturi alias aperiam tempora dignissimos nostrum, maxime debitis atque. Vero unde libero aut sint doloribus deleniti rem sed beatae maxime dolore laboriosam veniam maiores, natus quod facere molestias!
Accusantium tempore voluptate corporis non voluptatibus, necessitatibus quas, nemo quos officiis accusamus impedit repudiandae sunt consequatur recusandae blanditiis vel atque sequi quis deserunt explicabo tenetur labore qui commodi. In, inventore!
Maiores mollitia asperiores non provident. Nisi quas unde vel aliquam odit eos nesciunt nostrum dignissimos harum tempore magnam saepe iusto inventore ullam aut similique nam nobis, quia impedit ipsam beatae.
Enim sed ducimus molestias debitis accusantium, sint laboriosam minima perferendis corrupti dolorum consequatur voluptatem ab aspernatur numquam consectetur temporibus quo nesciunt quam aliquid. Itaque cumque voluptate quos minima illo cum!
Cumque autem labore aut ipsam repellendus vero eaque eligendi? Cupiditate perferendis quos at aliquid deleniti. Incidunt temporibus aut, officiis nam deleniti quisquam labore autem dolorum unde illum perspiciatis rerum quod!
Harum, eveniet repellendus dicta, quod nesciunt natus maxime rem in, ab expedita exercitationem modi. Laudantium, minus reiciendis cum, dolorum distinctio tempore aliquam quidem dicta doloribus rerum sequi sunt pariatur voluptas?
Distinctio ullam debitis, aliquam hic vitae aut doloribus provident sint soluta expedita repudiandae, et qui, earum omnis impedit perferendis. Hic omnis ab blanditiis ea ad nesciunt cupiditate laudantium adipisci aliquid.
Culpa iusto, quam repudiandae sapiente reiciendis, nulla, quod quisquam quidem excepturi saepe dolorum velit est ex vero ipsam? Exercitationem architecto assumenda aliquam sequi dolore excepturi facere repellat animi ab magni.
Eum provident culpa, ut natus, minus sequi, nobis illo sit quia corporis architecto! Iure atque culpa sint, ratione libero pariatur nemo, quidem dolorem, deleniti numquam cupiditate explicabo accusamus maiores eligendi?
Nobis, eos porro quod neque adipisci explicabo quo fugit modi veniam mollitia delectus, ipsam illum? Facere qui magni officiis voluptas voluptate tempora recusandae reiciendis dolore sequi officia, harum laboriosam at.
Cumque beatae, consectetur voluptate eligendi quaerat, esse labore obcaecati, quisquam dolor deserunt mollitia tempora. Cum, voluptatum? Veniam, iusto repellat. Quo aliquid perferendis quasi nisi consequuntur explicabo ut dolorem exercitationem perspiciatis!</div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

if you change in your .header and heightHeader transition options like this
-webkit-transition: width 0.8s ease;
-moz-transition: width 0.8s ease;
-ms-transition: width 0.8s ease;
transition: width 0.8s ease;
you will only animate width property and container will expand from the center and you will avoid the animation of the top. The problem with smoothness begin inside where your menu stays with setted margin-left: auto. From my experience you cannot animate auto property.

Related

Responsive nav bar not sticking on some screens

I am having a problem with the taskbar on my webpage. It is "sticky" on scroll down on a laptop screen, even when I resize the window to a size where the nav menu goes into a toggle.
However when I use the inspector to view it on IPhone or any screen type using the chrome inspector the "sticky" nav doesn't work until I scroll halfway down the page and then back up.
I would also appreciate any corrections to help me improve my work so far, I am a total beginner.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
padding-top: 2vh;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
#media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
#media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header class="logo">
<img src="Images\logo.png" alt="" width="auto" height="auto">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<img src="Images\logo.png" alt="" width="200px" height="auto">
</li>
<li>
Home
</li>
<li>
About us
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="language">
<img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne">
<img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo">
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>

It's actually because of your logo. When the screen reduces, you're not doing anything with it in your media query so it sticks to the top of the header as you've written it. If you add the logo class to your media query and style it appropriately, you can prevent it from breaking the sticky nav. See snippet, make sure you view it on a mobile device too.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
const navLogo = document.querySelector("li.nav-logo");
const navbar = document.querySelector('.main-nav');
const sticky = navbar.offsetTop;
window.addEventListener("scroll", stickyNav);
function stickyNav() {
if (window.scrollY >= sticky) {
// document.body.style.paddingTop = navbar.offsetHeight + 'px';
document.body.style.paddingTop = 0;
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
document.body.style.paddingTop = 0;
}
}
burger.addEventListener("click", () => {
// Toggle Nav
nav.classList.toggle("nav-active");
//Animate navLinks
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
navLogo.style.display = 'flex';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
navLogo.style.display = 'none';
}
});
//Burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
caret-color: transparent;
font-family: 'Roboto', sans-serif;
}
/* --------------------------------- Nav -------------------------------------------- */
/*Nav bar*/
/* Nav bar size and position */
.main-nav {
display: flex;
width: 100%;
transition: all 0.5s linear;
z-index: 1;
font-family: 'Roboto', sans-serif;
}
/*List on the task bar*/
.nav-links {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
list-style: none;
transition: all 0.05s linear;
padding: 2px;
}
/*links on the task bar*/
.nav-links a {
color: #0C3D8D;
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
position: relative;
}
/*Hover change*/
.nav-links a:hover {
color: #95989A;
font-size: 18px;
}
/* ------------------------------------- Sticky nav logo ---------------------------------------- */
/*Nav bar logo hidden*/
li.nav-logo {
padding-top: 5px;
padding-bottom: 5px;
max-width: 0px;
overflow: hidden;
transition: all 0.3s linear;
}
/* visible on sticky nav bar */
.sticky li.nav-logo {
display: flex;
max-width: 200px;
}
/* ----------------------------------- Sticky scroll ------------------------------------------ */
/*Stick Nav bar on scroll*/
/* Changes to task bar when scrolling */
.sticky {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(234, 234, 234, 0.895);
}
/* ----------------------------------- Language flags ------------------------------------------ */
/* Language flag information */
.languageFlag {
height: 20px;
width: 40px;
transition: all 0.2s linear;
}
/* Padding for flags*/
.language>* {
padding: 2px;
}
/* Hover change of flag icons */
.languageFlag:hover {
filter: grayscale(70%)
}
/* ----------------------------------------------------------------------------- */
/* Logo and spaceing from the top for logo*/
.logo {
display: block;
margin: 0 auto;
padding-bottom: 1.5vh;
padding-top: 2vh;
width: 200px;
height: auto;
}
.burger {
padding-top: 20px;
padding-left: 20px;
padding-bottom: 10px;
display: none;
cursor: pointer;
}
.burger div {
background-color: #0C3D8D;
width: 25px;
height: 3px;
margin: 5px;
transition: all 0.3s ease;
}
#media all and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
#banner {
display: none;
}
}
#media all and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 0vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.languages {
order: -2;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.logo {
position: fixed;
top: 0;
right: 0;
z-index: 10;
height: 59px;
width: auto;
padding-bottom: 0;
padding-top: 0;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.logo-hide {
display: none;
}
.column {
display: flex;
align-items: center;
}
.column>* {
flex-basis: 100%;
padding: 2%;
}
.topImage {
display: flex;
max-width: 100%;
}
#aboutUsTitle {
text-align: center;
color: #0C3D8D;
margin-bottom: 2vh;
font-size: 2rem;
letter-spacing: 1px;
}
#promise {
text-align: center;
font-size: 1.2rem;
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Monza</title>
</head>
<body>
<header>
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</header>
<nav class="main-nav">
<ul class="nav-links">
<li class="nav-logo">
<img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
</li>
<li>
Home
</li>
<li>
About us
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="language">
<img src="Images\de.png" alt="" srcset="" class="languageFlag" id="languageFlagOne">
<img src="Images\gb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo">
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="navbar.js"></script>
<script src="app.js"></script>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
dolorem.
</p>
</body>
</html>

Could not set position:fixed for body

I am trying to fix menu-card as position : fixed for screen. But it sets at top of the center-grid not for screen.
This is the Link of my codes
https://stackblitz.com/edit/nextjs-tdbx6i?file=pages%2Findex.js
index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React, { useState } from 'react';
export default function Home() {
const [open, setOpen] = useState(false);
const contentMenuOpenHandler = () => {
document
.getElementById('contentMenu')
.classList.add(styles.open_content_menu);
console.log('hiiiiii');
};
const contentMenuCloseHandler = () => {
document
.getElementById('contentMenu')
.classList.remove(styles.open_content_menu);
};
return (
<>
<div className={styles.main}>
<div className={styles.left_grid}>hi1</div>
<div className={styles.center_grid}>
<div>
<p>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quo
iusto officia deserunt aliquam numquam optio at eum eos. Nemo
beatae possimus ipsum quam distinctio odio minus maiores
quibusdam. Quaerat sint dolorum impedit repellat corrupti libero
aperiam natus assumenda, voluptatem sequi accusamus minima ut
provident ipsam exercitationem dolorem id, officiis possimus
repudiandae nam eius dicta recusandae. Facere consectetur labore
suscipit, dolorum, sequi placeat impedit animi eum fugiat,
assumenda voluptatum corrupti. A expedita earum nam voluptatem in
dolor laborum ducimus, inventore temporibus obcaecati ipsum harum
ex reiciendis! Hic, ex deserunt reiciendis fugit laborum nulla
nobis consequuntur molestias. Autem quisquam a odio dolorum ab
magnam unde, re
</p>
<div
id="contentMenuBtn"
className={styles.content_menu_btn_grid_wrapper}
item
xs={12}
>
<div className={styles.content_menu_btn}>
<button className={styles.btn} onClick={contentMenuOpenHandler}>
<svg className={styles.svg} viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z" />
</svg>
</button>
</div>
</div>
<p>
pudiandae itaque delectus commodi. Molestias numquam sunt velit
corrupti animi dignissimos, necessitatibus deserunt repellat
veniam voluptates magnam eius veritatis ab quis inventore tempora.
Rerum ullam velit, natus, praesentium beatae aliquam mollitia enim
corrupti commodi accusamus deserunt soluta perferendis tempora
iure laborum quaerat culpa voluptatem veritatis impedit tempore
fugit atque iste? Quos neque possimus nihil illo recusandae?
Laborum animi unde aspernatur, veritatis incidunt magni eos
facilis non iste aut iure atque explicabo! Dolorem, maxime ea.
Vel, magnam ad, similique tempore tempora aspernatur, alias culpa
quas saepe excepturi deleniti reprehenderit in deserunt omnis nemo
rem exercitationem eveniet possimus repellat minus expedita? Iure
unde minus nostrum ducimus quidem? Reprehenderit, numquam aperiam!
Voluptatum, ab pariatur? Maxime, dolores eveniet! Quam sapiente
placeat labore ipsam, doloribus facilis eveniet obcaecati
praesentium cumque consectetur, temporibus magnam! Molestias
veritatis id magni, eius sint totam culpa non ex ad fugiat fugit
nam ullam, neque ipsam maxime est unde voluptates repudiandae
aperiam qui! Eum quasi nemo beatae saepe labore reiciendis, enim
sit iusto ipsum. Enim atque laborum, quisquam quia odit mollitia?
Dignissimos corporis tempora quasi numquam, cumque non vero odit
consequatur nisi dicta inventore exercitationem quam rerum
voluptas eius voluptatem quos. Sunt est rem provident
reprehenderit nemo ullam illum, tenetur aspernatur rerum. Porro
accusantium veritatis consequatur explicabo temporibus. Ullam,
expedita! Ratione possimus recusandae consectetur porro libero
quaerat. Doloribus suscipit itaque, obcaecati quibusdam omnis
explicabo libero ab cupiditate voluptates tenetur quis blanditiis
consequatur sit dicta placeat voluptas, veritatis error
consectetur sed ratione quidem reiciendis? Recusandae perferendis,
expedita hic quod placeat quo tempore aspernatur itaque, aperiam
quis ad a natus vero libero, maiores possimus. Ullam libero
similique asperiores dignissimos quaerat nobis temporibus quam
distinctio sapiente perspiciatis, officiis, excepturi, pariatur
illum cupiditate inventore necessitatibus voluptates deserunt
magnam quas ipsa unde. Exercitationem, vitae suscipit itaque
perferendis obcaecati nisi iusto incidunt eum fugiat odio dolore.
Reiciendis consequatur in, praesentium vero beatae iure ratione
assumenda distinctio reprehenderit voluptate. Rerum deserunt
tempore facilis sapiente totam magni, quam tenetur, sed
repudiandae atque labore. Tempore voluptas debitis quam quis
pariatur nam, dolor libero voluptatum impedit doloribus,
temporibus soluta eum, atque sunt fugit voluptatibus similique
sint assumenda asperiores eos. Architecto ut provident ad! Non
reprehenderit quo inventore vero, reiciendis deserunt
necessitatibus voluptatibus id magnam, eum ratione eligendi illo
natus eos voluptatem optio hic ex aut. Modi adipisci facilis,
labore quasi minus recusandae nam dignissimos inventore maxime.
Consequatur assumenda illum et temporibus accusantium sint impedit
ullam deleniti praesentium hic sunt velit tempore asperiores, id
corrupti vero ab veritatis eum aliquid inventore sequi
necessitatibus dolor ad? Placeat quia natus architecto ut dolorum
fugiat atque pariatur itaque, velit dolor recusandae sunt. A nulla
tempore numquam deserunt libero dicta nisi deleniti quam? Esse
repudiandae, quisquam soluta itaque quo molestias placeat? Porro
ducimus, tenetur mollitia numquam consectetur impedit nulla
incidunt nostrum fugit neque illo enim possimus culpa corporis
iure accusantium dicta earum exercitationem obcaecati molestias
cupiditate saepe. Quod enim atque iste facere repellendus
quibusdam nihil ipsam ea modi. Error molestias corrupti quibusdam
consequuntur sapiente enim consectetur deserunt quas reiciendis
nisi pariatur, dolor assumenda nesciunt, dolores, excepturi
obcaecati officiis. Quo provident, a delectus quia maxime
accusantium amet minima, nobis quas necessitatibus voluptas magnam
ipsum tenetur porro, est quod labore veniam! Voluptatum quo
tenetur quisquam dolorem nemo possimus expedita quidem? Accusamus
impedit eum facilis accusantium, molestiae assumenda explicabo
corrupti nobis doloribus nisi sequi sint eaque aspernatur ab cum
numquam saepe nam tempore illum dolores ea labore, fuga facere.
Sed inventore error amet incidunt, quibusdam qui provident,
nesciunt sint omnis ipsa porro ab temporibus impedit! Hic iste
voluptatem quisquam? Deleniti magni quaerat, ipsam dolor deserunt
modi dicta at repellat. Minima sed, rerum ipsa autem quo sit,
placeat eaque amet, adipisci omnis quam ullam exercitationem
asperiores! Eveniet vel beatae reprehenderit consequuntur
accusamus officiis optio ut non facilis animi aliquam odio tempora
minima, perferendis incidunt maiores magni quae quas laboriosam
quo iste veritatis aperiam, vero in. Vitae error perspiciatis
quidem accusamus enim reprehenderit quod voluptatem delectus! Qui
amet quia perferendis sed dolore id exercitationem saepe veritatis
sequi. Cum, iusto laudantium quod minima odio dolorum praesentium
aliquid unde voluptatem expedita architecto impedit modi
inventore. Voluptatem deleniti non ipsum. Corporis, totam eos
doloribus nihil molestias libero, dicta sit debitis numquam atque
ipsum placeat ullam labore incidunt assumenda iste aspernatur
necessitatibus voluptatum iure qui hic, tempora officiis vitae!
Quis hic itaque sit nihil consectetur facere, quo, cum blanditiis
provident illo, totam sunt? Quidem itaque incidunt iure voluptate
quia? Animi magnam architecto, consectetur
</p>
<p>
laboriosam quas voluptatum accusamus placeat necessitatibus
voluptatem ipsam tempore assumenda aliquid sequi quisquam
voluptatibus, amet excepturi reprehenderit ea iusto provident! Ea
beatae enim modi nobis quibusdam soluta culpa suscipit dolor
perspiciatis exercitationem fugit necessitatibus consequatur
repellendus quidem, perferendis ullam quasi, aut tempore! Natus
accusantium atque ipsum reprehenderit? Et atque iste, cum esse
quia assumenda, explicabo dolore asperiores enim possimus
laudantium molestias eveniet a impedit facilis earum
exercitationem blanditiis obcaecati consequuntur deleniti, laborum
nesciunt inventore voluptates? Vel ullam vitae aliquid sapiente
quas ea ipsam in eaque, aut culpa dolor autem ad architecto, harum
eum ex accusantium earum officiis itaque? Ullam, provident porro
maxime cum, quos consequuntur officiis architecto laborum ut vel,
itaque impedit sit sunt atque natus reiciendis accusantium
molestiae esse numquam. Voluptas, magni! Beatae commodi adipisci
repudiandae eveniet illum saepe nobis aspernatur id accusamus,
tenetur similique voluptatibus enim dolorum, iure nam ipsam
officia sed. Dicta rerum nesciunt saepe illo consequatur. Eveniet
voluptas necessitatibus hic deleniti reprehenderit quidem quod
quisquam modi! Nihil ipsum fuga hic labore provident? Accusantium,
rem.{' '}
</p>
<div id="contentMenu" className={styles.menu_card_warapper}>
<div className={styles.close_btn_block}>
<button
className={styles.close_btn}
onClick={contentMenuCloseHandler}
>
Close
</button>
</div>
<div>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</div>
</div>
</div>
</div>
<div className={styles.right_grid}>hi3</div>
</div>
</>
);
}
home.module.scss
.main {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 100%;
flex-direction: row;
background-color: rgb(104, 104, 23);
}
.center_grid {
max-width: 56%;
flex-basis: 56%;
width: 56%;
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
background-color: green;
}
.left_grid {
position: fixed;
width: 22%;
left: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.right_grid {
position: fixed;
width: 22%;
right: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.content_menu_btn_grid_wrapper {
position: sticky;
top: 60vh;
right: 0;
z-index: 1;
}
.content_menu_btn {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 1rem;
margin-bottom: -3.5rem;
}
.btn {
background-color: pink;
border: none;
cursor: pointer;
margin: 0;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
border-radius: 50%;
box-shadow: 0 3px 10px rgba(#000, 0.3);
margin-top: 4rem;
margin-right: 1rem;
}
.svg {
width: 30px;
height: 30px;
fill: white;
}
.open_content_menu {
display: block !important;
}
.menu_card_warapper {
position: fixed;
top: 0;
z-index: 1001;
display: none;
width: 100%;
left: 0;
background-color: #ffffff;
overflow: hidden;
border: 10px black solid;
}
.close_btn_block {
background-color: yellow;
}
I need, when I click Menu-button the menu-card should open and it should fix center of the screen. When I scroll it should not move. and When I close the curse should be in initial stage not on the top of the center-grid
What is the issue in my codes? Anyone give me the solutions please.
Thanks

position: fixed won't work when you apply transform: translate to its parent. If you want to center the elements set the parent div's (.center_grid) position to relative and use margin: auto, it will have the same effect.
Also set your fixed menu's position to center by using transform:translateX(-50) and set width to 56%.
.center_grid {
max-width: 56%;
flex-basis: 56%;
width: 56%;
/*position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;*/
position: relative;
margin: auto;
background-color: green;
}
.menu_card_warapper {
position: fixed;
top: 0;
z-index: 1001;
display: none;
background-color: #ffffff;
overflow: hidden;
border: 10px black solid;
width: 56%;
left: 50%;
transform: translateX(-50%);
}
Stack overflow answer reference: 'transform3d' not working with position: fixed children
Your updated codesandbox and live preview link

Background video stuck in a fixed position and not moving with the page

While scrolling my background video is stuck on the screen. I have set the position to fixed but I want it to stop acting when the next container starts.
I also want the text of that video container to go sliding up through the video while scrolling and the same with the next container texts
I have tried replacing the position: fixed with background-poistion: fixed with no desirable changes
#title {
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
top: 0;
display: flex;
flex-direction: row;
}
.logo {
width: 4%;
top: 6px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -8px -40px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg, blue, white, yellow);
}
body {
box-sizing: border-box;
}
#header {
position: sticky;
top: 0;
;
}
#header-img {
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover {
margin: 0.5px -10px 0px -10px;
position: fixed;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml {
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text {
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 1;
font-size: 50px;
}
.policies {
margin-top: 0px;
background-color: whitesmoke;
display: grid;
position: relative;
}
#prod {
margin-top: 30px;
position: absolute;
top: 860px;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap" type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat
porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia
fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae!
Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam
soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid
tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem
reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam
deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum
ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse,
dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis
consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati
necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam
culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis,
magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam
doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid,
porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat
delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate?
Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis
cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati
odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci
a similique?</h5>
</section>
</body>
</html>

do you want something like this? If you want this, simply delete the html in the video section and use the code snippet.
var video = document.querySelector('#ds');
window.onscroll = () => {
if (document.querySelector('.hd-a').getBoundingClientRect().bottom < 0) {
video.pause();
} else {
if (!video.play()) {
video.play();
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hd-a {
position: relative;
width: 100%;
height: 100vh;
background-color: red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hd-a #ds {
min-width: 100vw;
position: absolute;
}
.hd-a .desc {
position: absolute;
z-index: 99;
color: #fff;
text-align: center;
padding-left: 50px;
padding-right: 50px;
}
.desc p {
margin-top: 50px;
}
<div class="hd-a">
<div class="desc">
<h1>Lorquasi, velit, quam sit ipsa officia illo veritatis expedita</h1>
<p>Loremque adipisci sequi animi dicta!</p>
</div>
<video autoplay muted loop id="ds">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem amet officia mollitia repudiandae autem, voluptates cupiditate consequuntur aspernatur repellat atque eum error dolorum quos numquam natus! Officia laborum facere earum iste molestias dignissimos
laboriosam, aliquam vel incidunt fuga. Dolorem doloribus veritatis magni expedita voluptas sit earum laudantium blanditiis reprehenderit quis! Impedit excepturi consequuntur porro tempore atque sequi eaque unde ut neque rerum odio nisi repellendus veniam
voluptates veritatis doloribus cumque consequatur sunt beatae aperiam quasi, non sapiente! Praesentium, eaque aut! Amet illo nostrum non qui blanditiis repellat fugiat, voluptatum reiciendis, asperiores totam harum aliquid facere consectetur, corporis
laboriosam porro impedit delectus quas natus! Sequi deserunt aliquid veritatis ea doloribus quasi neque molestias atque, itaque dicta corrupti, necessitatibus a quaerat, quia explicabo quisquam iste est aut deleniti id. Sed blanditiis nemo eos debitis
perferendis suscipit hic nesciunt, illo ducimus praesentium laborum quaerat eum. Voluptate, cum obcaecati? Voluptatem perferendis in animi sit repellat! At dolor eveniet dolores iure est sunt dolorem magnam illum ea, numquam sapiente atque eius voluptates
veniam, nihil expedita laborum quis ipsam labore officiis animi. Exercitationem, qui possimus nesciunt maxime id voluptates maiores, error unde modi debitis similique nihil temporibus! Quae eius iure minus ut eaque architecto quaerat similique incidunt
modi illum, expedita natus tenetur. Similique possimus quam vero quia sit doloremque tempore. Beatae ipsa similique voluptatibus maiores perspiciatis excepturi voluptates? Doloribus impedit dolor debitis quibusdam qui quidem! Incidunt itaque, vitae
laboriosam, optio impedit aliquid at cumque fugiat consequuntur praesentium vel excepturi nihil omnis animi voluptatum officiis voluptatem vero aspernatur aliquam? Omnis itaque ratione ducimus inventore debitis, pariatur, similique iste cumque nobis
exercitationem rem consequatur possimus veniam soluta, praesentium ut repellat illum. Nemo odio, quaerat numquam, expedita obcaecati saepe culpa esse amet provident ratione unde officiis. Quod aperiam molestiae ex quaerat animi iusto autem tempora,
neque consectetur nostrum assumenda mollitia natus tempore, dolorum soluta asperiores vel ipsam facilis non aliquam! Doloribus, adipisci at praesentium accusantium laborum aut dicta cum atque dolore qui quis magnam fuga delectus cumque error enim esse
eum? Nulla doloribus quis voluptas repellat molestias cupiditate est quibusdam. Expedita tempore corporis non iure animi, amet esse quaerat error impedit aliquam ipsum, et odio, accusamus earum ratione ut. Omnis ipsam iure error ullam ducimus sunt consequatur
neque itaque culpa aliquid hic quo, ratione nulla a amet earum quae iste minus fuga reiciendis nam dolore debitis molestiae. Qui, sapiente. Et illo vel voluptas nioluptas hic eum modi, sint temporibus officia assumenda est corrupti sed quisquam minus
ab inventore eveniet eos sequi consequatur. Labore, delectus doloribus iure id odit nemo accusantium fugit exercitationem odio nobis consequatur error placeat assumenda pariatur adipisci libero nesciunt voluptas laborum ratione minima. Eius, facere,
recusandae pore voluptatem quaerat fugit cumque quam ex eaque, dolores, repellendus earum officia sapiente magnam aliquam optio! Alias quia autem debitis consequuntur temporibus ipsam quam placeat eum iste atque ea quod nobis labore non impedit voluptas
dolor recusandae eaque nam omnis fugit, at, delectus quae? Porro error aut rem at earum, officiis placeat magnam magni eius. Quasi eveniet ex quaerat dolorem impedit corporis aspernatur, non consequuntur.</p>

How to not highlight every single link when navigating to a link after scrolling?

I have these links that work just fine when scrolling. My issue is that if I click on a single link (Example: Blog) just want to go straight to that link without having to travel to each link in order to make it to "Blog" link. Can someone point me in the right direction or tell me what I'm missing? Thanks a lot in advance!
Here is LIVE DEMO
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
NOTE: I still want to keep the smooth scrolling functionality.

You can manually disable scroll spy on click by link and then enable it by timeout.
let disableScrollControl = false;
let oldTimeoutId;
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
disableScrollControl = true;
document.querySelectorAll('nav ul li a').forEach(otherLink => {
otherLink.classList.remove('active');
});
link.classList.add('active');
if (oldTimeoutId) {
clearTimeout(oldTimeoutId);
}
oldTimeoutId = setTimeout(() => {
disableScrollControl = false;
oldTimeoutId = undefined;
}, 1000);
});
});
//Active navigation on scroll
window.addEventListener('scroll', event => {
if (disableScrollControl) {
return;
}
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#services">Services</a></li>
<li><a class="nav-link" href="#about-us">About Us</a></li>
<li><a class="nav-link" href="#blog">Blog</a></li>
<li><a class="nav-link" href="#contact-us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

We can set some sort of marker when a link is clicked and change the behaviour on scroll slightly so that if that marker is set the intermediary links don't get highlighted.
Change the li elements so they do something on the link being clicked as well, so the list becomes:
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
The changed JavaScript is:
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
You can see it working by running the snippet (use Full Page mode)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
</style>
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
<script>
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
</script>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

Firstly, I think there are some problems with the current approach.
To illustrate that, if you place a console.log statement inside the window's scroll event handler:
/* ... */
let fromTop = window.scrollY;
console.log('scroll event');
navigationLinks.forEach(link => { /* ... */ })
/* ... */
and click on Blog link, the console would print the message at least 20 times. Considering that the navigationLinks.forEach loop will run for each invocation of the handler, I'd say this is not the most efficient approach. There is also the fact that you query the DOM on each invocation as well, which it is not recommended.
With that in mind, here would be my approach:
const linksContainer = document.querySelector(".tab-content");
let prevActiveLink = document.querySelector(".tab-content .active");
// attaching the listener only on the container
// with the help of event bubbling, this handler will be called
// `ev.target` - the element that started the event
// `ev.currentTarget` - the element to which the handler attached
linksContainer.addEventListener('click', ev => {
// if we clicked on the container, no need to go further
if (ev.target === ev.currentTarget) {
return
}
console.log(ev)
const currentLink = ev.target;
if (currentLink === prevActiveLink) {
return;
}
prevActiveLink && prevActiveLink.classList.remove('active');
currentLink.classList.add('active')
prevActiveLink = currentLink;
})
Demo.
EDIT - using debounce
const handler = event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
console.log('scroll event')
navigationLinks.forEach(link => {
/* ... */
});
}
const debounce = (fn, time) => {
let id;
return ev => {
id && clearTimeout(id);
id = setTimeout(fn, time, ev)
}
}
window.addEventListener('scroll', debounce(handler, 100));
Demo

The only thing that you need to do is to add a debounce function so that your scroll event handler is 'deferred' to the future. For example:
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
//Active navigation on scroll
window.addEventListener('scroll', debounce(() => {
// ... your existing logic for scroll event
}, 50));
P.S. debounce function implementation is taken from here.
Updated pen is here

Sticky Navbar not working, code worked on W3schools

I tried making a navbar that once it passes a certain point it sticks, and I edited the default sticky code on w3schools and added an animation and that worked. But when I added the same code onto my file it doesn't do anything. Why isn't it working, how do I fix it?
I posted relevant code in this fiddle.
https://jsfiddle.net/yL3e9Lk4/
I also made a fiddle for the demo in W3schools which works.
https://jsfiddle.net/o65zca6w/
HTML:
var navbar = document.getElementById("navbar");
var sticky = stickpoint.offsetTop;
function StickyNav() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.classList.add("slide-in-top")
navbar.classList.remove("nav")
} else {
navbar.classList.add("nav")
navbar.classList.remove("sticky");
navbar.classList.remove("slide-in-top")
}
}
body {
/*background-color: #333;*/
overflow-x: hidden;
margin: 0px;
background: #333;
}
.nav {
list-style-type: none;
overflow: hidden;
display: inline-block;
z-index: 2;
position: absolute;
border: solid;
border-color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.li {
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
.resize-anchor {
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a {
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a {
display: inline-block;
color: white;
text-decoration: none;
white-space: nowrap;
}
a:hover {
color: #D1946F;
text-decoration: none;
}
a:link {
color: #D1946F;
text-decoration: none;
}
.nav-link {
margin: 0px 10px 30px 10px;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
padding: 0px 10px 0px 10px;
margin-top: 20px;
}
img {
width: 100%;
}
p {
color: white;
text-align: center;
}
h5,
h3 {
text-align: center;
color: #D1946F;
}
<div id="navbar" class="li flex-container nav">
<a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
<a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item col-md-2" href="#">BLOG</a>
</div>
<div class="container bottom PHOTOGRAPHER">
<h3>THROUGH MY LENS... YOUR STORY.</h3>
<p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
</p>
<h5>THE COLLECTION PORTFOLIO</h5>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
<p id="stickpoint">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui veniam
reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore nihil unde
vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis itaque
quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam tempora,
sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa odit, ullam
inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis similique
amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum ipsam, ipsa
nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio ipsa animi dolores
porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt quibusdam architecto
expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident.
Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore
quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere porro accusamus architecto
eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignissimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem
qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius, porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam
iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati illum dolorum quibusdam nisi placeat.</p>
<br>
</div>

Is it what you're looking for ?
body {
/*background-color: #333;*/
overflow-x: hidden;
margin: 0px;
background: #333;
}
.nav {
list-style-type: none;
overflow: hidden;
display: inline-block;
z-index: 2;
position: absolute;
border: solid;
border-color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.li {
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
.resize-anchor {
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a {
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a {
display: inline-block;
color: white;
text-decoration: none;
white-space: nowrap;
}
a:hover {
color: #D1946F;
text-decoration: none;
}
a:link {
color: #D1946F;
text-decoration: none;
}
.nav-link {
margin: 0px 10px 30px 10px;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
padding: 0px 10px 0px 10px;
margin-top: 20px;
}
img {
width: 100%;
}
p {
color: white;
text-align: center;
}
h5,
h3 {
text-align: center;
color: #D1946F;
}
<body onscroll="myFunction()">
<div id="navbar" class="li flex-container nav">
<a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
<a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item col-md-2" href="#">BLOG</a>
</div>
<div class="container bottom PHOTOGRAPHER">
<h3>THROUGH MY LENS... YOUR STORY.</h3>
<p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
</p>
<h5>THE COLLECTION PORTFOLIO</h5>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
<p id="stickpoint">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui
veniam reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore
nihil unde vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis
itaque quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam
tempora, sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa
odit, ullam inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis
similique amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum
ipsam, ipsa nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio
ipsa animi dolores porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt
quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur
fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis
corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere
porro accusamus architecto eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignisnesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid
iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit
tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam
beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi volunesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus
expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum
cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores
perferendis illo. Nostrum quia eligendi volusimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius,
porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati
illum dolorum quibusdam nisi placeat.</p>
<br>
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = stickpoint.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.classList.add("slide-in-top")
navbar.classList.remove("nav")
} else {
navbar.classList.add("nav")
navbar.classList.remove("sticky");
navbar.classList.remove("slide-in-top")
}
}
</script>
</body>
I'm sorry, I'm a beginner. This is what I understood.

Develop Reference

JavaScript is the programming language of the Web.

Sticky nav on scroll, extend nav width from center - javascript

Related

Responsive nav bar not sticking on some screens

Could not set position:fixed for body

Background video stuck in a fixed position and not moving with the page

How to not highlight every single link when navigating to a link after scrolling?

Sticky Navbar not working, code worked on W3schools

Categories

Resources