I've just included a button on the bottom right of the site to allow users to go back to the top of the page but it seems to have cancelled out my navbar from hiding when the user scrolls. I've been looking at it all morning and would really appreciate a fresh pair of eyes to look at it, any help would be great!
Thanks.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-70px";
}
prevScrollpos = currentScrollPos;
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
nav {
z-index: 99;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 60px;
text-align: center;
background-color: white;
font-size: 18px;
letter-spacing: 1px;
transition: top 0.3s;
border-bottom: #f1f1f1 2px solid;
}
nav a:first-child {
float: left;
}
.main-nav {
text-decoration: none;
display: inline-block;
float: right;
text-transform: uppercase;
color: #adb3c1;
padding: 1px 0;
margin: 0 10px;
transition: all 0.15s ease-in-out;
z-index: 10;
}
#navigation a:hover {
color: blue;
transition: 0.5s;
}
.fa-long-arrow-alt-up {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: none;
color: black;
cursor: pointer;
padding: 15px;
font-size: 18px;
}
#myBtn:hover {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="layout-portfolio">
<nav id="navigation">
<a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
<a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
<a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
<a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
</nav>
<!-- Button to go to top -->
<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>
window.onscroll can be set in one exemplary only, when you set it a second time, it replaces the first.
Solution: put all your code in the same function (I added scrollFunction(); to the first, but that can be the contrary):
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-70px";
}
prevScrollpos = currentScrollPos;
scrollFunction();
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
nav {
z-index: 99;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 60px;
text-align: center;
background-color: white;
font-size: 18px;
letter-spacing: 1px;
transition: top 0.3s;
border-bottom: #f1f1f1 2px solid;
}
nav a:first-child {
float: left;
}
.main-nav {
text-decoration: none;
display: inline-block;
float: right;
text-transform: uppercase;
color: #adb3c1;
padding: 1px 0;
margin: 0 10px;
transition: all 0.15s ease-in-out;
z-index: 10;
}
#navigation a:hover {
color: blue;
transition: 0.5s;
}
.fa-long-arrow-alt-up {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: none;
color: black;
cursor: pointer;
padding: 15px;
font-size: 18px;
}
#myBtn:hover {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="layout-portfolio">
<nav id="navigation">
<a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
<a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
<a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
<a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
</nav>
<div style="height: 700px;"></div>
<!-- Button to go to top -->
<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>
The issue here is that the second onscroll overrides the first one.
So, you can move the code to single function. I have updated the code below:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-70px";
}
prevScrollpos = currentScrollPos;
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
nav {
z-index: 99;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 60px;
text-align: center;
background-color: white;
font-size: 18px;
letter-spacing: 1px;
transition: top 0.3s;
border-bottom: #f1f1f1 2px solid;
}
nav a:first-child {
float: left;
}
.main-nav {
text-decoration: none;
display: inline-block;
float: right;
text-transform: uppercase;
color: #adb3c1;
padding: 1px 0;
margin: 0 10px;
transition: all 0.15s ease-in-out;
z-index: 10;
}
#navigation a:hover {
color: blue;
transition: 0.5s;
}
.fa-long-arrow-alt-up {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: none;
color: black;
cursor: pointer;
padding: 15px;
font-size: 18px;
}
#myBtn:hover {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="layout-portfolio">
<nav id="navigation">
<a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
<a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
<a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
<a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
<!-- Button to go to top -->
<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>
Related
html,body{
height: 100%;
}
body{
margin: 0;
background-color: #0f0f0f;
color: white;
font-family: 'Ubuntu', sans-serif;
display: grid;
grid-template-columns: 1fr 8fr;
}
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
section{
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.TopContent{
height: 70vh;
grid-column: 1/3;
grid-row:2/3 ;
background-color: white;
z-index: 1;
}
.Content{
grid-column: 1/3;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
.TopNavBtn{
background-color: #000000;
text-align: center;
vertical-align: middle;
color: white;
margin: 0px;
border: 0px;
height: 5vh;
width: 90px;
font-size: 25px;
transition-duration: 0.3s;
}
.TopNavBtn:hover{
height: 7vh;
font-size: 27px;
background-color: #272727;
font-weight: bold;
}
.Navigation{
grid-column: 1/2;
background-color: #0f0f0f;
}
.Divider{
aspect-ratio: 900/300;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Grad1
{
background-image: url("img/svg/Grad1.svg");
}
.Grad2
{
background-image: url("img/svg/Grad2.svg");
}
.Grad3
{
background-image: url("img/svg/Grad3.svg");
}
.Grad4
{
background-image: url("img/svg/Grad4.svg");
}
.RGrad1
{
background-image: url("img/svg/RGrad1.svg");
}
.RGrad2
{
background-image: url("img/svg/RGrad2.svg");
}
.RGrad3
{
background-image: url("img/svg/RGrad3.svg");
}
.RGrad4
{
background-image: url("img/svg/RGrad4.svg");
}
.b{
background-color: #015657;
}
.g{
background-color: #303030;
}
.w{
background-color: white;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!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="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body >
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
<article class="TopContent">
<div class="logo"></div>
</article>
<nav class="Navigation">
</nav>
<article class="Content">
<section class=" b" >
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider Grad1" ></div>
<section class=" g">
<p>Aliquid, ab? Quod nulla aliquam libero placeat et distinctio fugit maiores quisquam odit illo repellat, provident modi. Placeat, maiores facere, ut dolorem assumenda amet alias natus, expedita sit mollitia minima?</p>
</section>
<div class="Divider RGrad1" ></div>
<section class="b">
<p>Tenetur mollitia esse omnis rem voluptatum, quaerat, delectus nulla quasi similique deleniti tempora a libero ducimus, sit asperiores fugiat temporibus error. Alias consectetur sit odio? Praesentium, reiciendis dicta. Ducimus, consequatur.</p>
</section>
<div class="Divider Grad2" ></div>
<section class="g">
<p>Debitis sed ullam assumenda quasi! Quibusdam, laudantium minus cum delectus quasi facilis, quam amet alias ex, voluptatibus cumque ratione praesentium laborum sint nemo eaque sunt tempora qui ad odio consequatur!</p>
</section >
<div class="Divider RGrad2" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider Grad3" ></div>
<section class="g">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
<div class="Divider RGrad3" ></div>
<section class="b">
<p>Autem ratione tempora officiis reprehenderit, voluptatem rem sit quas veritatis! Aspernatur rerum nam architecto ex voluptates earum illo rem quia, culpa quaerat fuga voluptatibus impedit eaque iste sint nostrum facilis!</p>
</section>
</article>
<script>
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
</body>
</html>
I am trying to detected whether an Elemnt is inside the Viewport. When i looked this up, i was directed to usimg getBoundingClientRect to get its location relative to the Viewport.
However, when i tried implementing this solution, it didnt work, as this always returned a DOMRect with the x,y, top and left values being 0 and the others staying constant no matter where i scroll.
The html element(s) i want to get the location of:
<header id="TNav">
<nav class="TopNavigation" id="xdd">
<button class="TopNavBtn">xd</button>
</nav>
</header>
Its CSS:
header{
height: 5vh;
grid-column: 1/3;
grid-row:1/2 ;
background-color: black;
z-index: 2;
display: block;
}
.TopNavigation{
display: flex;
flex-direction: column;
}
The JS code:
let NavBar = document.getElementById("xdd");
let bound = NavBar.getBoundingClientRect();
window.onscroll= function (){
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
the code is implemented at the very bottom of the <body>.
I tried testing if the DOM is loaded and changing which element i read the location of.
Here is what the the getBoundingClientRect() returns:
Thanks to user Unmitigated, i now have the answer:
The let bound = NavBar.getBoundingClientRect had to be moved inside the window.onscroll event handler, like so:
<script>
let NavBar = document.getElementById("xdd");
window.onscroll= function (){
let bound = NavBar.getBoundingClientRect();
console.log("scrolled")
console.log(bound)
if(bound.top >=0)
{
}
else
{
console.log("isnt")
}
}
// to check if the DOM is loaded
document.addEventListener("DOMContentLoaded", (event) =>{
console.log("ready");
})
</script>
I'm trying to get a cool parallax effect using vanilla java script, but whenever I scroll down, all the sections with the parallax start at the same time. What I really need is for them to start when I reach the exact section, not when I scroll down. Please help, I'm a noob when it comes to javascript. I took this code from codepen from Gary Simon Design course, but I couldn't do it right, so I need help. thats what i've done so far .
window.addEventListener('scroll', function(e) {
const target = document.querySelectorAll('.scroll, .scroll2');
var index = 0, length = target.length;
for (index; index < length; index++) {
var pos = window.pageYOffset * target[index].dataset.rate;
if(target[index].dataset.direction === 'vertical') {
target[index].style.transform = 'translate3d(0px,'+pos+'px, 0px)';
} else {
var posX = window.pageYOffset * target[index].dataset.ratex;
var posY = window.pageYOffset * target[index].dataset.ratey;
target[index].style.transform = 'translate3d('+posX+'px, '+posY+'px, 0px)';
}
}
});
body {
margin: 0;
height: 100vh;
font-size: 5em;
font-family: 'Montserrat';
font-weight: bold;
}
section {
height: 100%;
overflow: hidden;
}
section .sec {
height: 100%;
overflow: hidden;
}
.sec ul {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
align-items: middle;
place-items: center;
min-height: 120vh;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
align-items: middle;
place-items: center;
height: 50vh;
}
.bg-0{
background-image: url(./images/section.jpg);
background-color: blue;
background-attachment: fixed;
background-position: center;
height: 50vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elena</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<section>
<ul>
<li class="scroll" data-rate="-2" data-direction="vertical">par</li>
<li>al</li>
<li class="scroll" data-rate="2" data-direction="vertical">lax</li>
</ul>
</section>
</div>
<div class="container-fluid bg-0">
</div>
<div class="container">
<section class="sec">
<ul>
<li class="scroll2" data-rate="-2" data-direction="vertical">par</li>
<li>al</li>
<li class="scroll2" data-rate="2" data-direction="vertical">lax</li>
</ul>
</section>
</div>
<div class="container">
<p class="text-dark fs-5">rovident nisi similique eos. Nam, rerum assumenda incidunt quo illum sunt impedit! Maxime, culpa fugiat? Dolores architecto, nisi nostrum officiis aut distinctio quam fugit at, saepe, cumque quae debitis? Eligendi praesentium, iusto eaque asperiores neque laudantium qui. Provident cumque aut libero mollitia debitis sed illum, in quos repellat, illo soluta. Numquam dolores tempore ea reprehenderit deleniti, possimus unde sed vel distinctio corrupti, ex commodi labore. Voluptas eum deleniti natus modi illo repellat harum enim esse at sunt. Impedit quasi iste consectetur earum explicabo ut quod odit. Iste, deleniti repellendus! Ipsam, possimus? Quaerat eaque suscipit facere labore obcaecati beatae, sequi dolor enim quae similique. Aliquam minima expedita, aliquid veniam recusandae sequi possimus itaque, dignissimos exercitationem ipsam voluptate! Voluptatum optio dolore, ipsum atque repellat odit nulla repellendus suscipit, aperiam cum, fugit ducimus. Veniam labore dignissimos deserunt aliquid iure accusamus optio ducimus expedita sunt earum doloremque voluptatibus aperiam dolore, unde odit excepturi delectus? Porro corrupti totam quod recusandae, ipsa dolores fugit rem natus ratione et aspernatur deserunt facere. Ad delectus fugit, iure accusantium saepe minus velit dicta cumque fugiat illum! Unde recusandae exercitationem nemo temporibus? Labore totam necessitatibus natus sunt at ipsum! Nam.</p>
<br>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script src="./js/script.js"></script>
</body>
</html>
When I open menu in smaller resolution(mobile resolution) and click on some link from the menu its not closing, its still there the menu. Can you help me? I think there is missing something in js code but I don't know what I can write more to close menu after clicking on the link from the menu.
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = () => {
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = () => {
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
}
.navbar.sticky {
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
background: url("banner.jpg") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navigation Bar | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<nav class="navbar">
<div class="content">
<div class="logo">
CodingNepal
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="banner"></div>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto
ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque
consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque
blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis
at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam
ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque
enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste
laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis
suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
</div>
</div>
</body>
You need to close the menu on link click as well as cancel. I've created a function for that to avoid duplication.
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
const menuLinks = document.querySelectorAll('.menu-list li a');
const closeMenu = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
};
menuBtn.onclick = () => {
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
};
cancelBtn.onclick = () => {
closeMenu();
};
menuLinks.forEach(link => {
link.onclick = () => {
closeMenu();
};
});
window.onscroll = () => {
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
};
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
}
.navbar.sticky {
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
background: url("banner.jpg") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navigation Bar | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<nav class="navbar">
<div class="content">
<div class="logo">
CodingNepal
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<div class="banner"></div>
<div class="about">
<div class="content">
<div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto
ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque
consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque
blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis
at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam
ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque
enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste
laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis
suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
</div>
</div>
</body>
What should I do to have such a thing? When I start scrolling I want the logotype (logo-white.jpg) in the .light-logo class to disappear as soon at it gets to navbar. And as soon as the scroll gets to navbar, a logotype (logo-dark.jpg) must appear there.
My js knowledge is poor, so, please, I would really appreciate you detailed answer and explanations.
$(document).ready(function() {
var navbarOffest = $(".navbar").offset().top;
$(window).on("scroll", function() {
var navbarHeight = $(".navbar").outerHeight();
if ($(window).scrollTop() >= navbarOffest) {
$(".navbar").addClass("navbar-fixed-top");
$("body").css("padding-top", navbarHeight + "px");
} else {
$(".navbar").removeClass("navbar-fixed-top");
$("body").css("padding-top", "0");
}
});
});
nav.navbar {
background: #fff;
color: #1e1d1f;
border-bottom: none;
border-radius: 0;
padding: 15px 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav.navbar a.navbar-brand {
color: #fff;
font-weight: 600;
}
nav.navbar a.navbar-brand:hover,
nav.navbar a.navbar-brand:focus {
color: inherit;
}
nav.navbar .navbar-toggle {
background: #fff;
color: #333;
border: none;
border-radius: 0;
}
nav.navbar .navbar-toggle:hover,
nav.navbar .navbar-toggle:focus {
background: #fff;
color: #333;
}
nav.navbar .navbar-collapse {
border: none;
}
nav.navbar ul.navbar-nav {
border: 2px solid #fff;
}
nav.navbar ul.navbar-nav a {
color: #1e1d1f !important;
font-family: 'Lato';
text-transform: uppercase;
font-weight: 900;
font-size: 14px;
letter-spacing: 0.3px;
}
nav.navbar ul.navbar-nav a:hover,
nav.navbar ul.navbar-nav a:focus {
color: #333;
background: #fff;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar {
margin-bottom: 0;
}
/* Navbar Form */
nav.navbar form.navbar-form input {
border-radius: 0 ;
border-color: #6172b9;
background: none;
color: #fff;
font-weight: 300;
}
nav.navbar form.navbar-form button {
background: #6172b9;
color: #fff;
border-color: #6172b9;
border-radius: 0;
box-shadow: none !important;
outline: none;
}
nav.navbar form.navbar-form button:hover {
background: #fff;
color: #6172b9;
}
/* Navbar Button */
nav.navbar button.navbar-btn {
border-radius: 0;
border-color: #6172b9;
background: #6172b9;
color: #fff;
}
nav.navbar button.navbar-btn:hover {
background: #fff;
color: #6172b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
<div class="content">
<div class="container">
<div class="row light-logo"><img src="assets/images/logo-white.png">
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="row">
<h1 class="hero-italic">Demo Title</h1>
<h1 class="hero-regular">Description</h1>
<p class="lead light">Subtitle with text</p>
<a class="btn btn-danger" target="_self" href="#">View all services</a> <a class="btn btn-fill btn-light" target="_self" href="#">Start the conversation</a>
</div><!--row-hero-->
</div><!-- col-7 -->
<div class="col-md-12 col-md-5"></div>
</div><!-- row -->
</div> <!-- container -->
</div> <!-- content -->
</section><!-- section -->
<header class="site-header" role="banner">
<nav class="navbar">
<div class="container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="exampleNavComponents">
<ul class="nav navbar-nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="main">
<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-md-4 text-center">
<div class="col-case equal">
<h2>Lorem Ipsum</h2>
<p>Description.</p>
More
</div>
</div>
<div class="col-md-4 text-center">
<div class="col-case equal">
<h2>Lorem Ipsum</h2>
<p>Description.</p>
More
</div>
<div class="col-md-4 text-center">
<div class="col-case equal">
<h2>Lorem Ipsum</h2>
<p>Description.</p>
More
</div>
</div>
</div>
</div>
</section>
<section>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</section>
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