Related
While scrolling my background video is stuck on the screen. I have set the position to fixed but I want it to stop acting when the next container starts.
I also want the text of that video container to go sliding up through the video while scrolling and the same with the next container texts
I have tried replacing the position: fixed with background-poistion: fixed with no desirable changes
#title {
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
top: 0;
display: flex;
flex-direction: row;
}
.logo {
width: 4%;
top: 6px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -8px -40px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg, blue, white, yellow);
}
body {
box-sizing: border-box;
}
#header {
position: sticky;
top: 0;
;
}
#header-img {
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover {
margin: 0.5px -10px 0px -10px;
position: fixed;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml {
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text {
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 1;
font-size: 50px;
}
.policies {
margin-top: 0px;
background-color: whitesmoke;
display: grid;
position: relative;
}
#prod {
margin-top: 30px;
position: absolute;
top: 860px;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap" type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat
porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia
fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae!
Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam
soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid
tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem
reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam
deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum
ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse,
dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis
consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati
necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam
culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis,
magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam
doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid,
porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat
delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate?
Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis
cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati
odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci
a similique?</h5>
</section>
</body>
</html>
do you want something like this? If you want this, simply delete the html in the video section and use the code snippet.
var video = document.querySelector('#ds');
window.onscroll = () => {
if (document.querySelector('.hd-a').getBoundingClientRect().bottom < 0) {
video.pause();
} else {
if (!video.play()) {
video.play();
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hd-a {
position: relative;
width: 100%;
height: 100vh;
background-color: red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hd-a #ds {
min-width: 100vw;
position: absolute;
}
.hd-a .desc {
position: absolute;
z-index: 99;
color: #fff;
text-align: center;
padding-left: 50px;
padding-right: 50px;
}
.desc p {
margin-top: 50px;
}
<div class="hd-a">
<div class="desc">
<h1>Lorquasi, velit, quam sit ipsa officia illo veritatis expedita</h1>
<p>Loremque adipisci sequi animi dicta!</p>
</div>
<video autoplay muted loop id="ds">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem amet officia mollitia repudiandae autem, voluptates cupiditate consequuntur aspernatur repellat atque eum error dolorum quos numquam natus! Officia laborum facere earum iste molestias dignissimos
laboriosam, aliquam vel incidunt fuga. Dolorem doloribus veritatis magni expedita voluptas sit earum laudantium blanditiis reprehenderit quis! Impedit excepturi consequuntur porro tempore atque sequi eaque unde ut neque rerum odio nisi repellendus veniam
voluptates veritatis doloribus cumque consequatur sunt beatae aperiam quasi, non sapiente! Praesentium, eaque aut! Amet illo nostrum non qui blanditiis repellat fugiat, voluptatum reiciendis, asperiores totam harum aliquid facere consectetur, corporis
laboriosam porro impedit delectus quas natus! Sequi deserunt aliquid veritatis ea doloribus quasi neque molestias atque, itaque dicta corrupti, necessitatibus a quaerat, quia explicabo quisquam iste est aut deleniti id. Sed blanditiis nemo eos debitis
perferendis suscipit hic nesciunt, illo ducimus praesentium laborum quaerat eum. Voluptate, cum obcaecati? Voluptatem perferendis in animi sit repellat! At dolor eveniet dolores iure est sunt dolorem magnam illum ea, numquam sapiente atque eius voluptates
veniam, nihil expedita laborum quis ipsam labore officiis animi. Exercitationem, qui possimus nesciunt maxime id voluptates maiores, error unde modi debitis similique nihil temporibus! Quae eius iure minus ut eaque architecto quaerat similique incidunt
modi illum, expedita natus tenetur. Similique possimus quam vero quia sit doloremque tempore. Beatae ipsa similique voluptatibus maiores perspiciatis excepturi voluptates? Doloribus impedit dolor debitis quibusdam qui quidem! Incidunt itaque, vitae
laboriosam, optio impedit aliquid at cumque fugiat consequuntur praesentium vel excepturi nihil omnis animi voluptatum officiis voluptatem vero aspernatur aliquam? Omnis itaque ratione ducimus inventore debitis, pariatur, similique iste cumque nobis
exercitationem rem consequatur possimus veniam soluta, praesentium ut repellat illum. Nemo odio, quaerat numquam, expedita obcaecati saepe culpa esse amet provident ratione unde officiis. Quod aperiam molestiae ex quaerat animi iusto autem tempora,
neque consectetur nostrum assumenda mollitia natus tempore, dolorum soluta asperiores vel ipsam facilis non aliquam! Doloribus, adipisci at praesentium accusantium laborum aut dicta cum atque dolore qui quis magnam fuga delectus cumque error enim esse
eum? Nulla doloribus quis voluptas repellat molestias cupiditate est quibusdam. Expedita tempore corporis non iure animi, amet esse quaerat error impedit aliquam ipsum, et odio, accusamus earum ratione ut. Omnis ipsam iure error ullam ducimus sunt consequatur
neque itaque culpa aliquid hic quo, ratione nulla a amet earum quae iste minus fuga reiciendis nam dolore debitis molestiae. Qui, sapiente. Et illo vel voluptas nioluptas hic eum modi, sint temporibus officia assumenda est corrupti sed quisquam minus
ab inventore eveniet eos sequi consequatur. Labore, delectus doloribus iure id odit nemo accusantium fugit exercitationem odio nobis consequatur error placeat assumenda pariatur adipisci libero nesciunt voluptas laborum ratione minima. Eius, facere,
recusandae pore voluptatem quaerat fugit cumque quam ex eaque, dolores, repellendus earum officia sapiente magnam aliquam optio! Alias quia autem debitis consequuntur temporibus ipsam quam placeat eum iste atque ea quod nobis labore non impedit voluptas
dolor recusandae eaque nam omnis fugit, at, delectus quae? Porro error aut rem at earum, officiis placeat magnam magni eius. Quasi eveniet ex quaerat dolorem impedit corporis aspernatur, non consequuntur.</p>
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
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'm trying to make a sidebar on a button, this button is at the bottom of the page, and I need this sidebar to appear where I click on it.
But for some reason, this sidebar is rising to the top of the screen.
I created this code quickly to show what is happening:
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800');
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
opacity: .9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 25px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 22px;
margin-left: 50px;
font-size: 30px
}
.slide a {
color: #000;
font-size: 36px;
}
#content {
padding: 20px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Responsive Animated Sidebar Menu</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}
</script>
</head>
<body>
<div id="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aut exercitationem ratione perferendis provident quaerat, vitae magni soluta molestias, saepe at pariatur inventore minima distinctio neque! Ut ab facilis tempora.
Distinctio doloremque aperiam minima laudantium soluta alias quam quod impedit voluptatibus tenetur, voluptatum reiciendis corrupti quibusdam neque molestiae odio quae maxime perspiciatis voluptates ipsum fuga illum nulla eaque provident? Repellendus.
Asperiores dolore saepe natus totam placeat provident est molestias nemo, perspiciatis quis! Rerum adipisci, sint, nam eaque rem nemo et, minima voluptas quas illum dolor ipsam ullam beatae atque veritatis.
Cupiditate harum voluptate vero obcaecati iure odit aspernatur officia qui ratione quos quasi fugit minima saepe quia nulla, debitis deleniti dolorum vitae excepturi libero at dolore cumque. Nulla, quos provident.
Minima reprehenderit ullam ea sit velit mollitia culpa iste eum consequatur corrupti est odit, at, harum aliquam eius, voluptatem ad? Nemo veritatis consectetur fugit laudantium tempore quod nobis, nihil fugiat.
Non labore, minima quidem magni quas et architecto. Beatae asperiores ex odit quod quibusdam fugiat excepturi minus expedita cumque veniam ipsa hic velit, voluptatum dicta nobis accusamus. At, ex expedita.
Repellat atque numquam eveniet optio, velit praesentium suscipit ut placeat enim quos, veritatis facilis soluta dolores officia dolore sapiente expedita adipisci. Eos rem accusamus aliquam odit saepe iste expedita veritatis?
Voluptates ipsam corrupti quam assumenda natus necessitatibus inventore quasi velit maiores, iure voluptatibus, debitis quibusdam in tempora? Quis, maiores nemo iusto suscipit repudiandae eum in nesciunt asperiores molestiae eaque eius!
Est, tempora eos tempore nihil voluptatum alias in perferendis assumenda ipsum amet odit minima. Eius totam quia atque dolor quos minima aut perspiciatis aspernatur maxime, consequuntur dolorem, tenetur accusantium unde?
Et obcaecati expedita repellendus iste ipsum pariatur fugit assumenda tempore esse mollitia, tenetur commodi at ut provident accusamus sed vel quos rerum aliquid architecto quis. Ut exercitationem officiis temporibus error?
Perspiciatis amet itaque minima! Fuga delectus beatae dicta. Culpa dolorum dolores in voluptatibus delectus adipisci quisquam atque eius modi blanditiis dolore quibusdam quo aliquid dignissimos qui quas, repellat temporibus soluta?
Cum quibusdam porro debitis dolorem voluptate obcaecati ipsa cumque, voluptatum fugit culpa. Modi consequatur hic voluptatibus fuga aliquid et voluptas dolores laudantium quaerat recusandae culpa corporis, corrupti iure porro deserunt.
Doloremque sit iusto quam perspiciatis nihil dolorum, adipisci iure illo architecto deserunt at possimus. Iusto quos delectus odio impedit quidem, sint architecto corrupti non animi, perspiciatis reprehenderit aperiam enim laborum?
Explicabo, labore, cupiditate non dolor consequuntur deleniti similique iusto dicta, illum quas aliquam suscipit voluptates magnam provident deserunt ratione quibusdam enim mollitia porro voluptatum praesentium fuga! Minima exercitationem magni saepe.
Fugit unde consequatur iste tenetur veritatis quas facilis corporis quisquam aspernatur. Beatae, debitis ut minus aspernatur eum similique repellendus excepturi veritatis aperiam dicta numquam velit totam officiis soluta vitae nisi?
Veritatis reprehenderit rem, voluptate sint provident vel ullam, enim alias maxime in laborum sunt ad quam tempora perferendis? Doloribus totam deleniti aut blanditiis suscipit corporis dignissimos minima, recusandae dicta et!
Perspiciatis excepturi a sequi reprehenderit totam officia mollitia voluptates provident obcaecati explicabo similique quas nesciunt molestiae quasi, perferendis neque repellat dolores ea sint praesentium, officiis velit cum recusandae at. Tempora.
Corporis omnis commodi aut soluta eum provident laboriosam velit rem voluptatum aperiam suscipit eveniet libero voluptatem eos dolores ut iste amet, tempora molestiae vero. Minus laborum iure corporis. Debitis, voluptatum.
Facilis, dolorem! Praesentium exercitationem adipisci odit quod possimus mollitia nemo consequatur ducimus minima repellendus. Doloremque laboriosam, facilis quibusdam deserunt illo mollitia, fuga aperiam repudiandae eaque quis voluptatum dolor earum cum.
Expedita nam excepturi facere repellat tempora reprehenderit eius cupiditate, sequi dolore nostrum perspiciatis maxime iure assumenda aliquid id nisi ab reiciendis aspernatur quisquam repudiandae adipisci. Temporibus animi voluptates dolor neque.</p>
<div style="width: 200px; height: 700px; background-color: red; margin-bottom: 20px;"></div>
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
Home
About
Services
Portfolio
Contact
</div>
</div>
</body>
</html>
The sidebar goes up the moment I click the button below.
Thanks if anyone can help!
Just modify hrefs:
<a href="javascript:;" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
You should use button tag instead, it is better for accessibility. If you use a tag, then you should read this link What is the difference between the different methods of putting JavaScript code in an <a>? to understand the difference.
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800');
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
opacity: .9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a {
display: block;
padding: 20px 30px;
font-size: 25px;
text-decoration: none;
color: #ccc;
}
.nav a:hover {
color: #fff;
transition: 0.4s;
}
.nav .close {
position: absolute;
top: 0;
right: 22px;
margin-left: 50px;
font-size: 30px
}
.slide a {
color: #000;
font-size: 36px;
}
#content {
padding: 20px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Responsive Animated Sidebar Menu</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginRight = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginRight = '0';
}
</script>
</head>
<body>
<div id="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aut exercitationem ratione perferendis provident quaerat, vitae magni soluta molestias, saepe at pariatur inventore minima distinctio neque! Ut ab facilis tempora.
Distinctio doloremque aperiam minima laudantium soluta alias quam quod impedit voluptatibus tenetur, voluptatum reiciendis corrupti quibusdam neque molestiae odio quae maxime perspiciatis voluptates ipsum fuga illum nulla eaque provident? Repellendus.
Asperiores dolore saepe natus totam placeat provident est molestias nemo, perspiciatis quis! Rerum adipisci, sint, nam eaque rem nemo et, minima voluptas quas illum dolor ipsam ullam beatae atque veritatis.
Cupiditate harum voluptate vero obcaecati iure odit aspernatur officia qui ratione quos quasi fugit minima saepe quia nulla, debitis deleniti dolorum vitae excepturi libero at dolore cumque. Nulla, quos provident.
Minima reprehenderit ullam ea sit velit mollitia culpa iste eum consequatur corrupti est odit, at, harum aliquam eius, voluptatem ad? Nemo veritatis consectetur fugit laudantium tempore quod nobis, nihil fugiat.
Non labore, minima quidem magni quas et architecto. Beatae asperiores ex odit quod quibusdam fugiat excepturi minus expedita cumque veniam ipsa hic velit, voluptatum dicta nobis accusamus. At, ex expedita.
Repellat atque numquam eveniet optio, velit praesentium suscipit ut placeat enim quos, veritatis facilis soluta dolores officia dolore sapiente expedita adipisci. Eos rem accusamus aliquam odit saepe iste expedita veritatis?
Voluptates ipsam corrupti quam assumenda natus necessitatibus inventore quasi velit maiores, iure voluptatibus, debitis quibusdam in tempora? Quis, maiores nemo iusto suscipit repudiandae eum in nesciunt asperiores molestiae eaque eius!
Est, tempora eos tempore nihil voluptatum alias in perferendis assumenda ipsum amet odit minima. Eius totam quia atque dolor quos minima aut perspiciatis aspernatur maxime, consequuntur dolorem, tenetur accusantium unde?
Et obcaecati expedita repellendus iste ipsum pariatur fugit assumenda tempore esse mollitia, tenetur commodi at ut provident accusamus sed vel quos rerum aliquid architecto quis. Ut exercitationem officiis temporibus error?
Perspiciatis amet itaque minima! Fuga delectus beatae dicta. Culpa dolorum dolores in voluptatibus delectus adipisci quisquam atque eius modi blanditiis dolore quibusdam quo aliquid dignissimos qui quas, repellat temporibus soluta?
Cum quibusdam porro debitis dolorem voluptate obcaecati ipsa cumque, voluptatum fugit culpa. Modi consequatur hic voluptatibus fuga aliquid et voluptas dolores laudantium quaerat recusandae culpa corporis, corrupti iure porro deserunt.
Doloremque sit iusto quam perspiciatis nihil dolorum, adipisci iure illo architecto deserunt at possimus. Iusto quos delectus odio impedit quidem, sint architecto corrupti non animi, perspiciatis reprehenderit aperiam enim laborum?
Explicabo, labore, cupiditate non dolor consequuntur deleniti similique iusto dicta, illum quas aliquam suscipit voluptates magnam provident deserunt ratione quibusdam enim mollitia porro voluptatum praesentium fuga! Minima exercitationem magni saepe.
Fugit unde consequatur iste tenetur veritatis quas facilis corporis quisquam aspernatur. Beatae, debitis ut minus aspernatur eum similique repellendus excepturi veritatis aperiam dicta numquam velit totam officiis soluta vitae nisi?
Veritatis reprehenderit rem, voluptate sint provident vel ullam, enim alias maxime in laborum sunt ad quam tempora perferendis? Doloribus totam deleniti aut blanditiis suscipit corporis dignissimos minima, recusandae dicta et!
Perspiciatis excepturi a sequi reprehenderit totam officia mollitia voluptates provident obcaecati explicabo similique quas nesciunt molestiae quasi, perferendis neque repellat dolores ea sint praesentium, officiis velit cum recusandae at. Tempora.
Corporis omnis commodi aut soluta eum provident laboriosam velit rem voluptatum aperiam suscipit eveniet libero voluptatem eos dolores ut iste amet, tempora molestiae vero. Minus laborum iure corporis. Debitis, voluptatum.
Facilis, dolorem! Praesentium exercitationem adipisci odit quod possimus mollitia nemo consequatur ducimus minima repellendus. Doloremque laboriosam, facilis quibusdam deserunt illo mollitia, fuga aperiam repudiandae eaque quis voluptatum dolor earum cum.
Expedita nam excepturi facere repellat tempora reprehenderit eius cupiditate, sequi dolore nostrum perspiciatis maxime iure assumenda aliquid id nisi ab reiciendis aspernatur quisquam repudiandae adipisci. Temporibus animi voluptates dolor neque.</p>
<div style="width: 200px; height: 700px; background-color: red; margin-bottom: 20px;"></div>
<span class="slide">
<a href="javascript:;" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="javascript:;" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
Home
About
Services
Portfolio
Contact
</div>
</div>
</body>
</html>
I tried making a navbar that once it passes a certain point it sticks, and I edited the default sticky code on w3schools and added an animation and that worked. But when I added the same code onto my file it doesn't do anything. Why isn't it working, how do I fix it?
I posted relevant code in this fiddle.
https://jsfiddle.net/yL3e9Lk4/
I also made a fiddle for the demo in W3schools which works.
https://jsfiddle.net/o65zca6w/
HTML:
var navbar = document.getElementById("navbar");
var sticky = stickpoint.offsetTop;
function StickyNav() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.classList.add("slide-in-top")
navbar.classList.remove("nav")
} else {
navbar.classList.add("nav")
navbar.classList.remove("sticky");
navbar.classList.remove("slide-in-top")
}
}
body {
/*background-color: #333;*/
overflow-x: hidden;
margin: 0px;
background: #333;
}
.nav {
list-style-type: none;
overflow: hidden;
display: inline-block;
z-index: 2;
position: absolute;
border: solid;
border-color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.li {
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
.resize-anchor {
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a {
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a {
display: inline-block;
color: white;
text-decoration: none;
white-space: nowrap;
}
a:hover {
color: #D1946F;
text-decoration: none;
}
a:link {
color: #D1946F;
text-decoration: none;
}
.nav-link {
margin: 0px 10px 30px 10px;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
padding: 0px 10px 0px 10px;
margin-top: 20px;
}
img {
width: 100%;
}
p {
color: white;
text-align: center;
}
h5,
h3 {
text-align: center;
color: #D1946F;
}
<div id="navbar" class="li flex-container nav">
<a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
<a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item col-md-2" href="#">BLOG</a>
</div>
<div class="container bottom PHOTOGRAPHER">
<h3>THROUGH MY LENS... YOUR STORY.</h3>
<p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
</p>
<h5>THE COLLECTION PORTFOLIO</h5>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
<p id="stickpoint">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui veniam
reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore nihil unde
vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis itaque
quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam tempora,
sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa odit, ullam
inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis similique
amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum ipsam, ipsa
nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio ipsa animi dolores
porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt quibusdam architecto
expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident.
Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore
quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere porro accusamus architecto
eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignissimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem
qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius, porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam
iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati illum dolorum quibusdam nisi placeat.</p>
<br>
</div>
Is it what you're looking for ?
body {
/*background-color: #333;*/
overflow-x: hidden;
margin: 0px;
background: #333;
}
.nav {
list-style-type: none;
overflow: hidden;
display: inline-block;
z-index: 2;
position: absolute;
border: solid;
border-color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.li {
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
.resize-anchor {
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a {
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
a {
display: inline-block;
color: white;
text-decoration: none;
white-space: nowrap;
}
a:hover {
color: #D1946F;
text-decoration: none;
}
a:link {
color: #D1946F;
text-decoration: none;
}
.nav-link {
margin: 0px 10px 30px 10px;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
padding: 0px 10px 0px 10px;
margin-top: 20px;
}
img {
width: 100%;
}
p {
color: white;
text-align: center;
}
h5,
h3 {
text-align: center;
color: #D1946F;
}
<body onscroll="myFunction()">
<div id="navbar" class="li flex-container nav">
<a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
<a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item col-md-2" href="#">BLOG</a>
</div>
<div class="container bottom PHOTOGRAPHER">
<h3>THROUGH MY LENS... YOUR STORY.</h3>
<p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
</p>
<h5>THE COLLECTION PORTFOLIO</h5>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
<p id="stickpoint">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui
veniam reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore
nihil unde vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis
itaque quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam
tempora, sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa
odit, ullam inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis
similique amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum
ipsam, ipsa nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio
ipsa animi dolores porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt
quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur
fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis
corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere
porro accusamus architecto eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignisnesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid
iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit
tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam
beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi volunesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus
expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum
cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores
perferendis illo. Nostrum quia eligendi volusimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius,
porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati
illum dolorum quibusdam nisi placeat.</p>
<br>
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = stickpoint.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.classList.add("slide-in-top")
navbar.classList.remove("nav")
} else {
navbar.classList.add("nav")
navbar.classList.remove("sticky");
navbar.classList.remove("slide-in-top")
}
}
</script>
</body>
I'm sorry, I'm a beginner. This is what I understood.