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>
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'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>
I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
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