Navbar Position remain fixed when scroll back to top - javascript

Actually am trying to achieve a sticky nav when scrolled and i use the javascript if...else statement to add a class of .sticky to the #navbar if the onscroll is greater than the #navbar offsetTop, else remove the class of .sticky and i add position: fixed; and width: 100%; and top: 0; to the .sticky, and fortunately these add class of .sticky to #navbar if the scroll is greater than the #navbar offsetTop
MY PROBLEM IS :- When scroll is less than the #navbar offsetTop the .sticky class doesn't remove and the #navbar remain fixed when scroll back to the top, how do i fixed it that my navbar will be back to normal when scroll is less than #navbar offsetTop..
HTML
<header>
<p>FaceMash</p>
<div id="headnotify">
🔔
🔇
📶
📧
</div>
</header>
<div id="navbar">
Home
Explore
Discover
Filter
Docs
More
</div>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati exercitationem nam fugiat, ab molestias quo saepe, sed iste doloribus earum, expedita quia nobis quidem quasi aliquid eos ullam! Qui fugiat, dolores quasi velit quae maxime blanditiis id. Aspernatur, omnis laudantium autem voluptate quibusdam dolor, alias tempora nam, blanditiis hic nihil iure saepe recusandae. Harum officia maxime laborum quia explicabo laudantium odit quisquam alias libero natus, voluptas voluptate nisi perspiciatis quam iusto rem atque officiis vitae cumque ad dolore, debitis labore. Natus ea expedita cupiditate, deserunt provident, laboriosam error beatae inventore consequuntur necessitatibus facere. Suscipit quis corrupti alias dolor ex error natus, expedita sed, voluptatibus aliquam quisquam earum voluptate rem animi omnis harum placeat quos unde! Debitis tempora, magni ex, nostrum ipsam consequuntur. Eaque, dolorem, tempore totam minus odio pariatur, veniam ad fugiat, incidunt harum dolorum quibusdam error cumque quae. Ipsam, necessitatibus nesciunt provident. Aliquid aut, dolorum! Dolor earum laborum repellendus at iure maiores quas enim reprehenderit ex ullam sequi possimus autem incidunt, porro vero quibusdam consectetur aspernatur accusamus et consequatur ipsum fugit. Totam officia nesciunt, accusantium sapiente quis placeat voluptatum, itaque repellat ratione. Non quis saepe eaque fugiat aliquam sit. Rerum aspernatur culpa, adipisci illum ea distinctio debitis quasi omnis sequi, natus, nulla. Voluptatum vel, quidem hic, autem dolore modi? Beatae quod sit, neque ex ab, tempore quam vel culpa ea quasi corporis vero, quaerat ipsam necessitatibus rem magnam, earum eius dignissimos ducimus exercitationem eveniet! Consectetur minus vitae, voluptatum suscipit. Voluptatibus esse aut eaque delectus. Consequatur molestias quam voluptatibus, quidem necessitatibus dolorem harum explicabo ut quas, amet magnam voluptatum illum quia laborum in voluptate expedita blanditiis. Sapiente fuga culpa maiores eum eligendi eaque sit explicabo vitae fugiat soluta, rerum vel atque perferendis repellat fugit mollitia ab, adipisci inventore? Quidem tempore commodi hic. Voluptatem nostrum possimus, asperiores minima animi numquam.
</p>
</section>
CSS
body{
margin: 0;
padding: 0;
font-family: arial;
}
#navbar{
display: flex;
height: 50px;
color: #fff;
-ms-align-items: center;
align-items: center;
background-color: gray;
}
#navbar a{
padding: 15px 30px;
color: #fff;
text-decoration: none;
}
#navbar a:hover{
background-color: rgba(0,0,0,.1);
}
header{
height: 100px;
display: flex;
-ms-align-items: center;
align-items: center;
}
header p{
font-size: 1.8em;
color: gray;
margin-left: 30px;
}
header #headnotify{
margin-left: auto;
margin-right: 50px;
display: flex;
}
header #headnotify a{
text-decoration: none;
padding: 10px 25px;
font-size: 1.5em;
}
header #headnotify a:hover{
background-color: #f1f1f1;
}
section{
width: 90%;
border: 1px solid gray;
padding: 30px;
margin: 30px auto ;
}
section p{
font-size: 1.4em;
line-height: 30px;
color: gray;
}
.sticky{
position: fixed;
width: 100%;
top: 0;
}
JAVASCRIPT
<script type="text/javascript">
const navbar = document.getElementById("navbar");
function scrollNav() {
if (window.pageYOffset >= navbar.offsetTop) {
navbar.classList.add('sticky');
}else {
navbar.classList.remove('sticky');
}
}
window.onscroll = function () {
scrollNav();
}
</script>


The issue is that your function constantly recalculates the offset because your event is bound to onscroll. What this means is that when it is set to sticky, the offset becomes unpredictable. You can fix this by pulling out the offsetTop variable outside of the function, so it is calculated only once.
var navbar = document.getElementById("navbar");
var navbarOffset = navbar.offsetTop;
window.onscroll = function () {
window.pageYOffset >= navbarOffset ? navbar.classList.add('sticky') : navbar.classList.remove('sticky')
}

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>

How to use CSS to maintain a 10px spacing between the yellow block and the black block below after the layout changes?

I am a self-learner of programming, and my English is not very good!
But there is a problem, I still try to describe the problem I encountered, I hope someone can help me.
At present, I have realized that when the mouse is scrolled to the specified position, the layout is converted, but I hope that when I switch to the yellow layout, the yellow block can still reserve a 10px distance from the black block below, but I have been in nav2, which is yellow Margin-bottom:10px is set in the block; I don’t know why the effect cannot be rendered!
Can someone tell me where I should set it?
Or is my CSS concept wrong?
Thank you for helping me. I want to thank you all for your attention to this issue.
$(document).scroll(function(){
var scrollH=$(document).scrollTop();
if(scrollH > 60){
$('.nav').addClass('up');
$('.nav2').addClass('down');
}else if(scrollH < 90){
$('.nav').removeClass('up');
$('.nav2').removeClass('down');
}
})
.header {
padding: 10px;
text-align: center;
height: 60px;
background-color: red;
color: #fff;
font-size: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.nav2 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e5d549;
color: #222;
padding: 20px;
position: fixed;
top: 80px;
left: 0px;
right: 0px;
opacity: 0;
margin-bottom: 10px;
}
.nav2.down {
-webkit-animation: fadeIn 1s forwards;
animation: fadeIn 1s forwards;
}
.nav2 .breadcrumb {
display: flex;
}
.nav2 .breadcrumb .item::after {
content: ">";
padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
display: none;
}
.nav2 .search {
display: flex;
align-items: center;
border: 1px solid #222;
padding: 3px;
order: 3;
}
.nav2 .search .fas {
color: #fff;
padding: 6px;
}
.nav2 .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #1768ac;
padding: 20px;
z-index: -1;
margin-bottom: 10px;
}
.nav.up {
-webkit-animation: fadeout 1s forwards;
animation: fadeout 1s forwards;
}
.nav .filter {
display: flex;
width: 100%;
order: 1;
color: #fff;
padding-left: 10px;
padding-bottom: 20px;
}
.nav .filter .item {
margin: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #fff;
}
.nav .category {
display: flex;
order: 2;
}
.nav .category .item {
color: #fff;
margin-left: 20px;
}
.nav .search {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 3px;
order: 3;
}
.nav .search .fas {
color: #fff;
padding: 6px;
}
.nav .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.content {
padding: 20px;
background-color: #222;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="header">LOGO</div>
<div class="nav">
<ul class="filter">
<li class="item">HOT</li>
<li class="item">NEW</li>
</ul>
<ul class="category">
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="nav2">
<ul class="breadcrumb">
<li class="item">index</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
</div>
</div>

This behaviour is because nav2 is a position:fixed element. When you mention an element as fixed, they are removed from the flow of the document and gets placed relative to the document based on top,left,right,bottom values.
That said, in-order to achieve the gap, you can place margin to the next element
.content {
padding: 20px;
background-color: #222;
color: #fff;
margin-top: 10px;
}

Menu to open on the visibile screen/ current location on web page whenever clicked on sticky button

I am trying to create a navbar which will scroll down on clicking a button. It is working fine but there is just one thing that I am unable to figure. My navbar is sticky and when I scroll down to the bottom of page or mid of page and click the button then the navbar menu is displayed at the top of webpage not at the current location where I am.
I want the navbar to behave the same way as the button in each navbar on stackoverflow that no matter where on the page I click the button, the div becomes visible.
This is the CSS code:
#btndiv
{
background-color:red;
height: 56px;
position: sticky;
top: 0px;
z-index: 2;
}
#mobilemenu
{
display: none;
background-color: whitesmoke;
position: absolute;
width:100%;
}
#mobilelinks
{
display: block;
text-align: center;
}
#mobilelinks a
{
display: block;
margin: 8px;
}
.innerdiv
{
margin: 12px;
}
.links
{
float: left;
}
.links a
{
padding: 12px;
margin: 0px 12px;
text-decoration: none;
color: black;
font-size: 1em;
cursor: pointer;
}
.links a:hover, .links a:focus
{
text-decoration: underline;
}
the work that I have done so far is displayed here:
https://jsfiddle.net/mahajaved/cans5qe0/16/

Working Solution :-
https://codepen.io/sbrakeshrath/pen/BaWmayY
What was Wrong
The #btndiv was sticky but#mobilemenu not .
So that's why mobilemenu is rendering on top .
Solution
move #mobilemenu to inside of #btndiv
Now Both are sticky , Problem Gone !!!!! .

The way to think about this is the menu that opens belongs to the red menu bar you have. So you want it to be positioned based on where your menubar is. The first step is therefore to move the #mobilemenu div into your #btndiv
Here's the updated fiddle: https://jsfiddle.net/7b3fg6z0/

This is happening because your mobilemenu is completely outside your div btnDiv that acts as the navbar. Just move the mobilemenu inside that div to fix your problem:
function menuvisible() {
$('#mobilemenu').slideToggle('slow');
}
#btndiv {
background-color: red;
height: 56px;
position: sticky;
top: 0px;
z-index: 2;
}
#mobilemenu {
display: none;
background-color: whitesmoke;
position: absolute;
width: 100%;
top: 10;
left: 0
}
#mobilelinks {
display: block;
text-align: center;
}
#mobilelinks a {
display: block;
margin: 8px;
}
.innerdiv {
margin: 12px;
}
.links {
float: left;
}
.links a {
padding: 12px;
margin: 0px 12px;
text-decoration: none;
color: black;
font-size: 1em;
cursor: pointer;
}
.links a:hover,
.links a:focus {
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btndiv">
<button id="menubtn" onclick="menuvisible()">Menu</button>
<div id="mobilemenu">
<div class="innerdiv links" id="mobilelinks">
Home
About
Courses
Library
Services
Contact
</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, sequi. Possimus, omnis natus. Quos, nostrum ab iste laudantium quod vitae doloribus perspiciatis quibusdam reiciendis fugit ratione nam veniam eaque vel optio possimus deserunt, fugiat laboriosam!
A, voluptas. Itaque magnam, quasi aliquam obcaecati hic esse blanditiis deleniti repudiandae totam temporibus amet veritatis quaerat in doloribus recusandae quos eaque vero tempora rerum corporis quia culpa quas nulla. Laudantium tenetur provident voluptate
impedit cum veritatis doloremque minima dolore modi quibusdam, cupiditate aperiam, pariatur ex voluptas magni nobis. Voluptatibus, quia error fugit quae ex placeat iusto magni provident architecto? Quisquam nam quas ea enim! Quod quidem, adipisci et
soluta ullam voluptas rerum cupiditate eius, exercitationem, similique maxime omnis consequuntur tenetur quae maiores eos doloremque ab libero debitis? Dicta omnis sequi recusandae atque, libero quod repudiandae aut at fugiat alias earum? Eveniet corporis
modi rerum non? Aperiam, deserunt in voluptatum quisquam velit tempora repellendus dolor laboriosam, ipsam aspernatur quidem ipsa sit magnam ab non laborum voluptate sequi. Quibusdam inventore fugiat laborum quas blanditiis earum doloremque molestias,
neque qui et est error voluptate doloribus quasi quia ipsa ipsum voluptatibus. At est odio debitis sunt architecto quo tempore eius deserunt sed et ad molestias reiciendis impedit minus earum consequuntur, nobis dignissimos beatae expedita corporis
atque totam doloribus nihil ipsa. Et beatae ratione, a hic odio, saepe voluptas quis necessitatibus sit dolore impedit voluptates eveniet tenetur libero fugit voluptatum reprehenderit exercitationem facere omnis ut distinctio vitae! Eius molestias et
nostrum at vero pariatur asperiores, iusto cupiditate itaque labore ad consequatur corporis doloribus repellendus dolore ullam mollitia nihil repellat aut similique! Quis, ipsam similique quo aliquam saepe ut odio, fuga reiciendis nemo iusto provident
optio quisquam dolore natus repudiandae ducimus possimus adipisci nulla deleniti est, tempora temporibus? Voluptates, voluptas neque quas sequi illo placeat animi voluptatibus asperiores porro in. Impedit pariatur esse est dolorum quas facilis assumenda
laboriosam ab culpa vitae! Cum, repudiandae. Temporibus nam voluptatum esse perferendis quam expedita, dignissimos quod aliquid dolore eum consequatur laboriosam quos eius animi aliquam ipsam deserunt officia reiciendis. Harum assumenda velit molestiae
necessitatibus aspernatur sed tempora quod.</div>
This works because now mobilemenu is a child of btnDiv, so when you set position: absolute on mobilemenu, you can control its position using top, right, bottom and left, which will be calculated relative to the position of btnDiv
Earlier, the position of mobilemenu was being calculated relative to its parent, which was body hence it was always at the top right corner of the document even when the page was scrolled down.

How to use jquery or CSS to display the blue block after touching the yellow block?

I would like to ask you a question. I hope that when the yellow block is displayed, when the mouse hovers over the yellow block stone, the original blue block can be displayed again!
But I still can't achieve the effect after trying it for an afternoon. Would you like to ask everyone to help me see if there is a problem?
Thank you all for your help.
$(document).scroll(function(){
var scrollH=$(document).scrollTop();
if(scrollH > 60){
$('.nav').addClass('up');
$('.nav2').addClass('down');
}else if(scrollH < 90){
$('.nav').removeClass('up');
$('.nav2').removeClass('down');
}
})
.header {
padding: 10px;
text-align: center;
height: 60px;
background-color: red;
color: #fff;
font-size: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.nav2 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e5d549;
color: #222;
padding: 20px;
position: fixed;
top: 80px;
left: 0px;
right: 0px;
opacity: 0;
margin-bottom: 10px;
}
.nav2.down {
-webkit-animation: fadeIn 1s forwards;
animation: fadeIn 1s forwards;
}
.nav2 .breadcrumb {
display: flex;
}
.nav2 .breadcrumb .item::after {
content: ">";
padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
display: none;
}
.nav2 .search {
display: flex;
align-items: center;
border: 1px solid #222;
padding: 3px;
order: 3;
}
.nav2 .search .fas {
color: #fff;
padding: 6px;
}
.nav2 .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #1768ac;
padding: 20px;
z-index: -1;
margin-bottom: 10px;
}
.nav.up {
-webkit-animation: fadeout 1s forwards;
animation: fadeout 1s forwards;
}
.nav .filter {
display: flex;
width: 100%;
order: 1;
color: #fff;
padding-left: 10px;
padding-bottom: 20px;
}
.nav .filter .item {
margin: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #fff;
}
.nav .category {
display: flex;
order: 2;
}
.nav .category .item {
color: #fff;
margin-left: 20px;
}
.nav .search {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 3px;
order: 3;
}
.nav .search .fas {
color: #fff;
padding: 6px;
}
.nav .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.content {
padding: 20px;
background-color: #222;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="header">LOGO</div>
<div class="nav">
<ul class="filter">
<li class="item">HOT</li>
<li class="item">NEW</li>
</ul>
<ul class="category">
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
<li class="item">title</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="nav2">
<ul class="breadcrumb">
<li class="item">index</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
</div>
</div>

When the mouse touches the yellow block, the blue block will be displayed and return to the displayed height.
Just add the following jquery :
$(function() {
$(".nav2").on("mouseover", function() {
window.scrollTo(0, 0);
});
})
Here is the example code: https://jsfiddle.net/9e2s18a0/19/

How do i darken the whole page? ( html )

When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.
Is there a way to overlap the whole document with a gray transparent plane?

There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)
HTML:
<div class="wrapper">
<button class="btn btn-success dim">Dim the page!</button>
<div class="dimmer">
<span class="exit">×</span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
</div>
</div>
CSS:
.wrapper {
padding: 2.5em;
margin: 0 auto;
width: 80%;
}
.dimmer {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.dim {
display: block;
margin: 2em auto;
z-index: 200;
}
.exit {
font-size: 100px;
color: red;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
cursor: pointer;
}
Javascript:
$(function() {
var dimmerButton = $('.dim');
var dimmer = $('.dimmer');
var exit = $('.exit');
dimmerButton.on('click', function() {
dimmer.show();
});
exit.on('click', function() {
dimmer.hide();
});
});
Note: The author of this is #srikarg

You will need to show an overlay div
<div id="overlay"></div>
Make it position fixed
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
and make it visible when you want to darken the page, here is how you do it
$(function(){
//Am hiding the overlay after 2 sec
$("#overlay").delay(3000).hide(200);
})
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="overlay"></div>
<h1>My Awesome Page</h1>
</body>

You can add a background-color to your body with css:
#overlay {
background-color: rgba(0,0,0,0.5); /* your color */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
Demo: http://jsfiddle.net/6gahqaej/2

Categories

Resources