Related
I am trying to create a custom cursor in my slider section with "following the cursor with element", but it's not working properly, i mean the custom cursor is way far than original cursor.
I have tried a lot, searched a lot, found the answers in stackoverflow but these were not working for me. So, I am putting question here.
Here is the live website link:
http://green-light.infinitweb.co/landscape-lighting-projects/
// Init Slider
const landscapeProjectsSlider = () => {
const elem = $('.landscapeProjects-slider');
if (elem.length === 0) return false;
elem.slick({
centerMode: true,
centerPadding: '20%',
dots: false,
arrows: false,
slidesToShow: 1,
responsive: [
{
breakpoint: 576,
settings: {
centerPadding: '60px'
}
}
]
})
}
landscapeProjectsSlider();
// Custom Cursor Positioning
const landscapeProjectsSliderCursor = () => {
let $mouseX = 0, $mouseY = 0;
let $xp = 0, $yp =0;
$('.landscapeProjects').mousemove(function(e){
$mouseX = e.clientX;
$mouseY = e.clientY;
});
setInterval(() => {
$xp += (($mouseX - $xp) / 5);
$yp += (($mouseY - $yp) / 5);
$('.landscapeProjects-cursor').css({
left: $xp +'px',
top: $yp +'px'
});
}, 60);
}
landscapeProjectsSliderCursor();
.landscapeProjects {
margin-top: 52px;
position: relative
}
.landscapeProjects-cursor {
position: absolute;
border: 2px solid #8dba52;
border-radius: 50%;
padding: 30px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: 70px;
height: 70px;
display: grid;
place-content: center;
z-index: 2
}
#media (min-width: 576px) {
.landscapeProjects-cursor {
width:106px;
height: 106px
}
}
.landscapeProjects-indicators {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 15px
}
#media (min-width: 576px) {
.landscapeProjects-indicators {
margin-bottom:0;
justify-content: none;
position: absolute;
top: 50%;
right: 18%;
transform: translateY(-50%)
}
}
#media (min-width: 768px) {
.landscapeProjects-indicators {
font-size:28px;
line-height: 37px
}
}
.landscapeProjects-slider .landscapeProjects-slider--item {
padding: 0 6px
}
#media (min-width: 576px) {
.landscapeProjects-slider .landscapeProjects-slider--item {
padding:0 30px
}
}
#media (min-width: 768px) {
.landscapeProjects-slider .landscapeProjects-slider--item {
padding:0 65px
}
}
.landscapeProjects-slider .landscapeProjects-slider--item__content {
margin-top: 18px
}
#media (min-width: 576px) {
.landscapeProjects-slider .landscapeProjects-slider--item__content {
margin-top:34px;
display: flex;
align-items: center;
justify-content: space-between
}
}
#media (min-width: 768px) {
.landscapeProjects-slider .landscapeProjects-slider--item__date {
font-size:28px;
line-height: 37px
}
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css' type='text/css' media='all' />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum odio animi, minus dolore libero molestias dolores quia doloremque quod est dicta autem ut totam necessitatibus impedit? Ipsum cum itaque dicta.
Odio quia laboriosam quam architecto porro non, sequi distinctio in vitae perferendis inventore voluptatibus veritatis, ullam recusandae possimus magni neque reiciendis pariatur accusantium exercitationem sapiente. Totam numquam quis voluptatem! Dicta!
Nam fugiat eligendi sunt! Illo maxime a placeat minus provident adipisci rerum dicta ex consectetur corporis molestias, beatae tempora fugit laboriosam quae nesciunt? Quo, soluta nesciunt et asperiores nostrum itaque?
Ullam architecto, eius perspiciatis quas labore rerum delectus necessitatibus, inventore voluptate odit quos! Dolor mollitia dolore earum autem iste veniam, libero eligendi veritatis facere tempore numquam sunt accusamus repellat quo!
Ex asperiores numquam nihil, veritatis natus dolores blanditiis temporibus, sequi velit maxime eius reiciendis eos quidem. Cumque qui, blanditiis est temporibus inventore dolorum illo, aspernatur fuga omnis cupiditate dolor atque.
Nostrum error eos cumque sapiente optio voluptatibus tenetur delectus. Aliquam neque voluptatum assumenda quod consectetur aliquid accusamus asperiores cum consequatur numquam maiores sapiente laboriosam ducimus, quam accusantium! Veritatis, voluptates modi.
Itaque deserunt, eaque adipisci atque neque quibusdam harum minus facere corporis molestias pariatur quam exercitationem, nisi rerum similique, maxime veniam quo! Ipsum praesentium eligendi facere nam in expedita cum minima?
Quia illo itaque voluptatibus placeat. Ut assumenda ipsam nemo, iste error nostrum deserunt! Delectus, placeat quae voluptatibus eaque consequuntur perferendis similique sapiente! Necessitatibus magnam similique quas quibusdam reiciendis, fugit unde?
Quis placeat adipisci voluptas tenetur tempora voluptates impedit obcaecati, eum eos distinctio aliquam molestias debitis sint eligendi harum reprehenderit quia explicabo cupiditate, mollitia ratione! Recusandae sit ut tempore rem architecto!
Eaque numquam nostrum cumque consectetur dignissimos, minima molestias excepturi, nihil ea magni provident quidem cum odio maiores aperiam quod ab qui dolore quis illo doloremque reiciendis? Amet vitae aperiam excepturi.
Tempora error asperiores enim quaerat ipsa fuga, architecto labore omnis quos quidem eaque hic. Quisquam quia itaque, consectetur aperiam magnam qui dolores distinctio odio asperiores rerum numquam a eligendi explicabo!
Maxime voluptate molestias minus porro nemo reiciendis sit voluptatum nam aut reprehenderit tempora ut officia, repellat consectetur magni veniam vel? Nostrum cumque beatae placeat repudiandae unde omnis consequuntur sint ex.
Praesentium odit doloribus ex dolorem non eligendi velit et soluta ut, minus, ea eos odio saepe consectetur consequuntur dolores alias repudiandae molestias aperiam accusamus quo asperiores ipsum rerum omnis. Odit!
Fuga sapiente harum laudantium ullam, perferendis provident cupiditate ea? Reiciendis deserunt aperiam, repellat natus harum, quia quasi, facere eaque numquam explicabo voluptas. Eum ipsum natus necessitatibus consectetur omnis quae recusandae?
Eligendi perspiciatis, fugiat enim, molestias exercitationem, quae consequatur tempora nihil deleniti iure aut! Nesciunt ea iure ratione laudantium tenetur enim quam odit nam vitae illum! Voluptatem enim nisi possimus dicta.
Molestias, rem praesentium ex consequuntur repellat corrupti, quam a consequatur provident rerum, error beatae maiores ad nostrum dolorum incidunt corporis nemo voluptatum architecto id sint similique. Asperiores facilis illum repellat.
Exercitationem, modi voluptate! Mollitia ducimus hic corporis exercitationem obcaecati distinctio illum sed rerum accusamus ut nemo ipsam quo autem dignissimos quos nostrum, eveniet quisquam fuga alias omnis veniam adipisci praesentium.
Aliquam laborum quasi tempore porro exercitationem dolores non dignissimos sequi voluptates, neque nobis, est ex aut soluta facilis doloribus. Exercitationem omnis, numquam esse excepturi expedita voluptatem quidem ducimus amet obcaecati!
Fugiat hic earum provident aut harum sunt odit explicabo, repellendus, iste consectetur corporis aliquam debitis nulla molestias cum impedit aperiam eligendi aliquid. A maiores consectetur, architecto labore nulla id doloribus.
Expedita amet sit officiis iusto ab corrupti, quisquam, incidunt nisi quae provident omnis! Earum, quasi ad veniam vero reiciendis consectetur doloribus odio ea excepturi ex quidem nam sit harum tempore?
</p>
<section class="landscapeProjects">
<!-- Custom Cursor Start -->
<div class="landscapeProjects-cursor">Drag</div>
<!-- Custom Cursor End -->
<div class="landscapeProjects-slider">
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Guest House</h2>
<div class="landscapeProjects-slider--item__date">2019</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Alpino Greto</h2>
<div class="landscapeProjects-slider--item__date">2020</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Cras Vel</h2>
<div class="landscapeProjects-slider--item__date">2021</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Guest House</h2>
<div class="landscapeProjects-slider--item__date">2019</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Alpino Greto</h2>
<div class="landscapeProjects-slider--item__date">2020</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Cras Vel</h2>
<div class="landscapeProjects-slider--item__date">2021</div>
</div>
</div>
</div>
</section>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum odio animi, minus dolore libero molestias dolores quia doloremque quod est dicta autem ut totam necessitatibus impedit? Ipsum cum itaque dicta.
Odio quia laboriosam quam architecto porro non, sequi distinctio in vitae perferendis inventore voluptatibus veritatis, ullam recusandae possimus magni neque reiciendis pariatur accusantium exercitationem sapiente. Totam numquam quis voluptatem! Dicta!
Nam fugiat eligendi sunt! Illo maxime a placeat minus provident adipisci rerum dicta ex consectetur corporis molestias, beatae tempora fugit laboriosam quae nesciunt? Quo, soluta nesciunt et asperiores nostrum itaque?
Ullam architecto, eius perspiciatis quas labore rerum delectus necessitatibus, inventore voluptate odit quos! Dolor mollitia dolore earum autem iste veniam, libero eligendi veritatis facere tempore numquam sunt accusamus repellat quo!
Ex asperiores numquam nihil, veritatis natus dolores blanditiis temporibus, sequi velit maxime eius reiciendis eos quidem. Cumque qui, blanditiis est temporibus inventore dolorum illo, aspernatur fuga omnis cupiditate dolor atque.
Nostrum error eos cumque sapiente optio voluptatibus tenetur delectus. Aliquam neque voluptatum assumenda quod consectetur aliquid accusamus asperiores cum consequatur numquam maiores sapiente laboriosam ducimus, quam accusantium! Veritatis, voluptates modi.
Itaque deserunt, eaque adipisci atque neque quibusdam harum minus facere corporis molestias pariatur quam exercitationem, nisi rerum similique, maxime veniam quo! Ipsum praesentium eligendi facere nam in expedita cum minima?
Quia illo itaque voluptatibus placeat. Ut assumenda ipsam nemo, iste error nostrum deserunt! Delectus, placeat quae voluptatibus eaque consequuntur perferendis similique sapiente! Necessitatibus magnam similique quas quibusdam reiciendis, fugit unde?
Quis placeat adipisci voluptas tenetur tempora voluptates impedit obcaecati, eum eos distinctio aliquam molestias debitis sint eligendi harum reprehenderit quia explicabo cupiditate, mollitia ratione! Recusandae sit ut tempore rem architecto!
Eaque numquam nostrum cumque consectetur dignissimos, minima molestias excepturi, nihil ea magni provident quidem cum odio maiores aperiam quod ab qui dolore quis illo doloremque reiciendis? Amet vitae aperiam excepturi.
Tempora error asperiores enim quaerat ipsa fuga, architecto labore omnis quos quidem eaque hic. Quisquam quia itaque, consectetur aperiam magnam qui dolores distinctio odio asperiores rerum numquam a eligendi explicabo!
Maxime voluptate molestias minus porro nemo reiciendis sit voluptatum nam aut reprehenderit tempora ut officia, repellat consectetur magni veniam vel? Nostrum cumque beatae placeat repudiandae unde omnis consequuntur sint ex.
Praesentium odit doloribus ex dolorem non eligendi velit et soluta ut, minus, ea eos odio saepe consectetur consequuntur dolores alias repudiandae molestias aperiam accusamus quo asperiores ipsum rerum omnis. Odit!
Fuga sapiente harum laudantium ullam, perferendis provident cupiditate ea? Reiciendis deserunt aperiam, repellat natus harum, quia quasi, facere eaque numquam explicabo voluptas. Eum ipsum natus necessitatibus consectetur omnis quae recusandae?
Eligendi perspiciatis, fugiat enim, molestias exercitationem, quae consequatur tempora nihil deleniti iure aut! Nesciunt ea iure ratione laudantium tenetur enim quam odit nam vitae illum! Voluptatem enim nisi possimus dicta.
Molestias, rem praesentium ex consequuntur repellat corrupti, quam a consequatur provident rerum, error beatae maiores ad nostrum dolorum incidunt corporis nemo voluptatum architecto id sint similique. Asperiores facilis illum repellat.
Exercitationem, modi voluptate! Mollitia ducimus hic corporis exercitationem obcaecati distinctio illum sed rerum accusamus ut nemo ipsam quo autem dignissimos quos nostrum, eveniet quisquam fuga alias omnis veniam adipisci praesentium.
Aliquam laborum quasi tempore porro exercitationem dolores non dignissimos sequi voluptates, neque nobis, est ex aut soluta facilis doloribus. Exercitationem omnis, numquam esse excepturi expedita voluptatem quidem ducimus amet obcaecati!
Fugiat hic earum provident aut harum sunt odit explicabo, repellendus, iste consectetur corporis aliquam debitis nulla molestias cum impedit aperiam eligendi aliquid. A maiores consectetur, architecto labore nulla id doloribus.
Expedita amet sit officiis iusto ab corrupti, quisquam, incidunt nisi quae provident omnis! Earum, quasi ad veniam vero reiciendis consectetur doloribus odio ea excepturi ex quidem nam sit harum tempore?
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
Can someone help me? I am stuck.
You have to take the element's offsetTop and the circle size (width, height) into account.
Use the following code in your mousemove handler:
$('.landscapeProjects').mousemove(function(e){
// subtract half of circle width
$mouseX = e.pageX - 106/2;
// subtract offset top (Y offset on page) and half of circle height
// and limit the Y position with Max.min
$mouseY = Math.min(e.pageY - e.currentTarget.offsetTop - 106/2, e.clientY);
});
Demo:
I have these links that work just fine when scrolling. My issue is that if I click on a single link (Example: Blog) just want to go straight to that link without having to travel to each link in order to make it to "Blog" link. Can someone point me in the right direction or tell me what I'm missing? Thanks a lot in advance!
Here is LIVE DEMO
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
NOTE: I still want to keep the smooth scrolling functionality.
You can manually disable scroll spy on click by link and then enable it by timeout.
let disableScrollControl = false;
let oldTimeoutId;
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
disableScrollControl = true;
document.querySelectorAll('nav ul li a').forEach(otherLink => {
otherLink.classList.remove('active');
});
link.classList.add('active');
if (oldTimeoutId) {
clearTimeout(oldTimeoutId);
}
oldTimeoutId = setTimeout(() => {
disableScrollControl = false;
oldTimeoutId = undefined;
}, 1000);
});
});
//Active navigation on scroll
window.addEventListener('scroll', event => {
if (disableScrollControl) {
return;
}
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#services">Services</a></li>
<li><a class="nav-link" href="#about-us">About Us</a></li>
<li><a class="nav-link" href="#blog">Blog</a></li>
<li><a class="nav-link" href="#contact-us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>
We can set some sort of marker when a link is clicked and change the behaviour on scroll slightly so that if that marker is set the intermediary links don't get highlighted.
Change the li elements so they do something on the link being clicked as well, so the list becomes:
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
The changed JavaScript is:
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
You can see it working by running the snippet (use Full Page mode)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
</style>
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
<script>
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
</script>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>
Firstly, I think there are some problems with the current approach.
To illustrate that, if you place a console.log statement inside the window's scroll event handler:
/* ... */
let fromTop = window.scrollY;
console.log('scroll event');
navigationLinks.forEach(link => { /* ... */ })
/* ... */
and click on Blog link, the console would print the message at least 20 times. Considering that the navigationLinks.forEach loop will run for each invocation of the handler, I'd say this is not the most efficient approach. There is also the fact that you query the DOM on each invocation as well, which it is not recommended.
With that in mind, here would be my approach:
const linksContainer = document.querySelector(".tab-content");
let prevActiveLink = document.querySelector(".tab-content .active");
// attaching the listener only on the container
// with the help of event bubbling, this handler will be called
// `ev.target` - the element that started the event
// `ev.currentTarget` - the element to which the handler attached
linksContainer.addEventListener('click', ev => {
// if we clicked on the container, no need to go further
if (ev.target === ev.currentTarget) {
return
}
console.log(ev)
const currentLink = ev.target;
if (currentLink === prevActiveLink) {
return;
}
prevActiveLink && prevActiveLink.classList.remove('active');
currentLink.classList.add('active')
prevActiveLink = currentLink;
})
Demo.
EDIT - using debounce
const handler = event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
console.log('scroll event')
navigationLinks.forEach(link => {
/* ... */
});
}
const debounce = (fn, time) => {
let id;
return ev => {
id && clearTimeout(id);
id = setTimeout(fn, time, ev)
}
}
window.addEventListener('scroll', debounce(handler, 100));
Demo
The only thing that you need to do is to add a debounce function so that your scroll event handler is 'deferred' to the future. For example:
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
//Active navigation on scroll
window.addEventListener('scroll', debounce(() => {
// ... your existing logic for scroll event
}, 50));
P.S. debounce function implementation is taken from here.
Updated pen is here
I was looking to trigger different buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
I have tried a lot until now but nothing runs properly.
For the first section (blue) everything looks great.
but when I tried to trigger the second section, nothing work.
I was wondering what I have to modify in my Javascript code to make my snippet work.
Any ideas?
Here my fiddle:
https://jsfiddle.net/CAT999/48rd76mp/3/
const btn = document.querySelector('.btn-a');
const overlay = document.querySelector('.overlay');
function openModal() {
overlay.classList.add('overlay--open');
}
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
btn.addEventListener('click', openModal, false);
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
display:inlne-block;
background: #1e90ff;
color: #fff;
line-height: 1.5;
padding: 30px;
}
.red{ background: red;}
/* Button */
.uno {
display: inline-block;
height:40px;
background: #ff6347;
position: sticky;
bottom: 30px;
right:20px;
}
.btn-a {
border: none;
border-radius: 4px;
color: #fff;
background-color: #222;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-a:active {
transform: scale(0.9);
}
.btn-b {
border: none;
border-radius: 4px;
color: red;
background-color:yellow;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-b:active {
transform: scale(0.9);
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: absolute;
width: 100%;
margin: 45vh auto 0;
padding: 25px;
border-radius: 5px;
box-shadow: 0 5px 12px rgba(15, 27, 39, .3);
background: #fff;
color:black;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 45px;
}
<!--SECTION-1-->
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-a'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-1-->
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-b'>Open Modal due</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-2-->
<section class="red">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
</section>
when you use document.querySelector('btn-a') you select only the button for the first modal. So ofcourse it won't work for the second one too.
I suggest you use a common class for the buttons ( modal-btn in my example ).
Select them with querySelectorAll which returns a NodeList with all the nodes with class modal-btn.
Loop over the NodeList with forEach so you can select each button. Then, on click on the button select the corresponding overlay using nextElementSibling.
P.S. My suggestion is to use just 1 overlay not overlays for each modal.
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
display:inlne-block;
background: #1e90ff;
color: #fff;
line-height: 1.5;
padding: 30px;
}
.red{ background: red;}
/* Button */
.uno {
display: inline-block;
height:40px;
background: #ff6347;
position: sticky;
bottom: 30px;
right:20px;
}
.btn-a {
border: none;
border-radius: 4px;
color: #fff;
background-color: #222;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-a:active {
transform: scale(0.9);
}
.btn-b {
border: none;
border-radius: 4px;
color: red;
background-color:yellow;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-b:active {
transform: scale(0.9);
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: absolute;
width: 100%;
margin: 45vh auto 0;
padding: 25px;
border-radius: 5px;
box-shadow: 0 5px 12px rgba(15, 27, 39, .3);
background: #fff;
color:black;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 45px;
}
<!--SECTION-1-->
<section>
<p>
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-a modal-btn'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-1-->
<section>
<p>
</p>
<div class="uno">
<!--MODAL-2-->
<button class='btn-b modal-btn'>Open Modal due</button>
<div class="overlay">
<div class="modal">
<span>Title Description-2👋 🌎</span>
</div>
</div>
<!--MODAL-2-->
</div>
</section>
<!--SECTION-2-->
Your problem is document.querySelector('.overlay') only selects the first instance it finds of the class overlay.
If you want different overlays on the same page you need to relate the button to it's relative overlay (most likely using ids)
How can I fix the body scrollbar problem, However, I assign the modal style to padding-left: 17px; but it just hides the modal scrollbar. How to hide the body scrollbar when the modal is active (like bootstrap)
Note:
When I active the modal (I can assign body overflow: hidden) and when I remove the active class from the modal (I can assign body overflow: scroll) ---> is it good?
My code :
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active');
// document.body.style.overflow = 'hidden';
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
// document.body.style.overflow = 'scroll';
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
padding-left: 17px;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>
You could continue using your approach of manipulating the classes. Simply define a class with overflow: hidden and add that class to the body element. Once you close the modal remove that class from the body element.
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active'); document.querySelector('body').classList.add('modal-active');
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
document.querySelector('body').classList.remove('modal-active');
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
padding-left: 17px;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
.modal-active {
overflow: hidden;
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>
i have created a side menu bar with some bit of css and java script but when i tried to edit my list elements to fit the width of the side bar they just start far from the margin. where did i go wrong or what have i missed?
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
});
#charset "utf-8";
body
{
font: 16px "Helvetica",sans-serif;
line-height: 1.4;
font-weight: 200;
background-color: #563838;
}
.wrapper
{
margin: 0 auto;
width: 1160px;
text-align: center;
position: relative;
top: 230px;
}
.nav-side
{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background-color: rgba(8, 120, 164, 0.9);
box-sizing: border-box;
color: brown;
margin-left: -250px;
transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
margin-left: 0;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
list-style: none
}
.nav-side ul li
{
height: 70px;
background-color: antiquewhite;
left: 0;
}
.nav-toggle
{
position: absolute;
right: -70px;
top: 10px;
width: 70px;
height: 70px;
background-color: rgba(30, 207, 214, 0.1);
line-height: 70px;
text-decoration: none;
text-align: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
background-color: #1ecfd6;
cursor: pointer;
}
.nav-toggle:before
{
content: "🙇";
font-weight:900;
color: white;
font-size: 32px;
padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
content: "🙆";
right: 0;
}
.logo
{
width: 100%;
height: 225px;
text-align: center;
position: fixed;
background-color: #272424;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
</div>
<div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div>
<nav class="nav-side" nav-open>
<ul>
<li>
Home
</li>
<li>
Menu
</li>
<li>
Store
</li>
<li>
Account
</li>
<li>
Shopping Cart
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can i get my list elements fitting the width of my side menu instead of them starting far from the left margin?
Remove default padding and margin from ul tag, most of tags consist of default styling same here ul tag has default styling for both margin and padding and that's why your menu has that spacing.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Make this changes in your code.
.nav-side ul {
list-style: none;
padding:0; /* Add this */
margin:0;
}
You need work on little bit on CSS styling, modify the following selector as suggested.
.nav-side ul
{
list-style: none;
padding:10px;
margin: 0;
background-color: antiquewhite;
}