Develop Reference

How to keep navbar section link (state=active/highlighted) after clicking on it? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
How to keep navbar section link (state=active) after clicking on it?
Having problems keeping the link in active state/highlighted. Thank you!
Code (HTML, CSS, Javascript) can be found here: https://drive.google.com/drive/folders/1SbnbS7SxSFJz_ceuhjhq5vLWtQtz4b45?usp=sharing

One way of doing that, pls check comments in code :
let sections = document.querySelectorAll('section');
const countSec = sections.length;
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
function createListItem() {
for (let x = 0; x < countSec; x++) {
let ul = document.getElementById("navbar__list");
let addListItem = document.createElement('li');
addListItem.setAttribute('class', 'newlist');
let secName = document.createTextNode(`Section ${x + 1}`);
let a = document.createElement('a');
// 👇 add css class to link
a.classList.add("navlink")
// 👇 listen to click on link
a.addEventListener('click', (e) => {
activeNav(e) // 👈 call function on click
})
a.href = `#section${x + 1}`;
a.appendChild(secName);
a.style.cssText = 'text-decoration: none; font-weight: bold';
addListItem.appendChild(a);
ul.appendChild(addListItem);
addListItem.style.cssText = 'margin-right: 15px; position: relative; right: 10px; padding: 15px 0 15px 0;'
}
}
createListItem();
// 👇 function for link click
const activeNav = (e) => {
clearNav() // 👈 call function to clear all active links
e.target.classList.add("active") // 👈 add active class to clicked link
}
// 👇 function to clear all active links
const clearNav = () => {
const links = document.querySelectorAll('.navlink') // 👈 get all links with previously added class
links.forEach(l => l.classList.remove('active'))
}
function checkViewPort(element) {
let rect = element.getBoundingClientRect();
return (rect.top);
}
window.onscroll = function () {
document.querySelectorAll("section").forEach(function(active){
if(
active.getBoundingClientRect().top>= -400 &&
active.getBoundingClientRect().top <= 150
) {
active.classList.add("your-active-class");
} else {
active.classList.remove("your-active-class");
}
});
};
let btn = document.querySelector(".btn_scroll");
window.onscroll = function () { scroll() };
function scroll() {
if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
}
function goToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
body {
background: rgb(136,203,171);
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
margin: 0;
font-family: 'Merriweather', serif;
color: #fff;
}
h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
#media only screen and (min-width: 35em){
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: #eee;
}
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* 👇 class for active link */
.active {
background-color: #83c4f8 !important;
}
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p{
color: #fff;
}
.landing__container {
padding: 1em;
text-align: left;
}
#media only screen and (min-width: 35em){
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
.newlist a{
color: #ffffff !important;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 20px;
padding: 0px 10px !important;
transition: all 0.2s linear;
line-height: 15px;
}
.newlist a{
color:#1172c4 !important;
}
.newlist a:hover {
color: #ffffff !important;
background: #1172c4;
border-color: #1172c4;
}
li.newlist:hover a{
color:#ffffff !important;
}
.newlist:active {
border-radius: 22px;
}
.btn_scroll {
display: none;
color: black;
padding: 15px;
}
section.your-active-class {
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
#keyframes rotate {
from {
transform: rotate(0deg)
translate(-1em)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-1em)
rotate(-360deg);
}
}
<!DOCTYPE >
<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>Manipulating the DOM</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header class="page__header">
<nav class="navbar__menu">
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<a onclick="goToTop()" class="btn_scroll btn_scroll--active" style="font-size: 60px; font-weight:bolder;">↑</a>
</main>
<footer class="page__footer">
<p>&copy All rights reserved</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>

html css javascript canvas isn't visible on my website

so I've been trying to make something move in the background of my website using canvas, like a object or just lines that randomly appear at slightly different speed and size. But my background is in the way of the canvas I think. Did I do something wrong, or is it in the way of my background? Im very new to coding, so please be patient with me. Thanks!
thanks
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
/*gare kleuren achtergrond*/
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 101.5%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color:white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p{
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1{
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition:0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li{
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a{
transition: ease-in-out .2s;
}
a:link{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
color: black;
}
a:hover{
border: 1px solid;
zoom: 1.1;
}
.nav{
border:1px solid;
border-width:1px;
height: 64px;
list-style:none;
margin:0;
padding:0;
text-align:center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 40){
$(".woord").css({"opacity" : "0"})
}
else {
$(".woord").css({"opacity" : "1"})
}
})
})
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="gaar.js"></script>
</head>
<body>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li>Biografie</li>
<li>fotos</li>
<li>heuristiek</li>
<li>buienradar</li>
<li>Contact</li>
</ul>
<p>hoi</p>
<p>dit is mijn website</br>over mijzelf </p>
</div>
</body>
</html>

(Edited once I realized I misread the original question)
So theBODY element is going to be the root of everything visible on your document, so you're not going to get anything "behind" that tag, since everything else is considered a child of it.
If you want something to be behind "everything," you give it a z-index of -1. That will place it behind everything thats got a z-index set, and everything that's got the default index of 0. Note that for z-index to have an effect, your element must have absolute, fixed, relative or sticky positioning applied.
and if you want it to be visible, ensure anything that appears in front of it is at least partially transparent.
.behind {
/* may also be absolute, sticky, or relative */
position: fixed;
/* Put this element behind anything with a higher z-index */
z-index: -1;
background-image: url(https://placekitten.com/408/287);
width: 400px;
height: 280px;
top: 1em;
left: 1em;
}
h1, p {
/* 100% opaque */
/*background-color: white;*/
/* 100% transparency */
/*background-color: transparent;*/
/* 50% transparency */
background-color: rgba(255, 255, 255, 0.5);
}
body {
background-color: rgba(255, 0, 0, 1);
/* Nothing is ever actually behind the BODY tag. */
}
<html>
<body>
<h1>Hello, world!</h1>
<div class="behind"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales vehicula nulla vitae eleifend. Donec facilisis ligula a lectus tincidunt sagittis. Morbi libero diam, mattis eget tristique ut, tincidunt ut orci. Curabitur vulputate libero at interdum
vulputate. Quisque tincidunt, sapien quis dapibus accumsan, nulla urna ultrices risus, vel facilisis orci ex id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus finibus tincidunt sem quis
fermentum. Donec nec tellus eu dui auctor blandit. Aliquam erat volutpat. Donec malesuada diam orci, vitae pulvinar odio tincidunt id. Nam interdum, dolor eu consectetur suscipit, enim eros tempor orci, sit amet ullamcorper ipsum erat id risus. Integer
finibus nisl vel risus interdum maximus. Cras id nulla ut arcu lacinia aliquet sit amet at arcu. Vestibulum scelerisque velit imperdiet leo aliquet, ultricies accumsan turpis faucibus. Cras pulvinar tempus ipsum, et tempor sapien bibendum semper.
Morbi bibendum placerat nisl.</p>
<p>Etiam placerat libero neque, ac imperdiet orci rutrum auctor. Morbi nec commodo justo. Fusce diam lorem, molestie vitae tortor id, vulputate lobortis urna. Aliquam id mauris ligula. Ut posuere tellus ac laoreet pellentesque. Phasellus mollis, felis
sit amet bibendum condimentum, dui risus feugiat quam, ac porttitor dolor mi non mauris. Duis commodo imperdiet tortor, id consequat dolor. Nullam non ullamcorper tellus, eget aliquam nisl. Nunc sed purus eget elit efficitur ornare blandit ut nunc.
Nam finibus iaculis ante, ut suscipit massa venenatis sed. Nullam porta, arcu vitae eleifend gravida, diam orci vulputate magna, in lacinia odio odio non tellus. Duis pretium eget diam vitae auctor. Aliquam cursus urna leo, ac vehicula quam posuere
ac. Etiam in quam justo.</p>
<p>Nullam dictum gravida orci, quis mollis tortor placerat at. Mauris justo diam, iaculis quis maximus vitae, tincidunt et nisl. Nullam venenatis eros risus, a facilisis elit tincidunt dictum. Suspendisse mi elit, lacinia vel elit lobortis, gravida pharetra
dolor. Curabitur quis tincidunt diam. Nulla ligula eros, viverra eu nisi et, suscipit blandit sem. Nullam egestas ante vitae quam hendrerit, quis vestibulum nibh sodales. Quisque in dolor viverra, condimentum tortor ut, bibendum ante. Fusce commodo
mi vel fringilla vehicula. Aliquam mauris leo, feugiat eu varius nec, ornare vel nibh.</p>
</body>
</html>

how to highlight the navigation bar using only HTML, CSS and Javascript

I need to make the navigation bar items in this code to be highlighted while their corresponding sections are brought into view using only HTML, CSS and Javascript. I mean I shouldn't use any libraries or frameworks and no HTML5 or CSS3. Some people told me to use something called "scroll spy", but after looking it up and doing some trials, I couldn't use it in my code, it didn't give the desired outcome. So please help me with it.
here's the HTML code
<!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>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet"> <!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page </h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<p>dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt. Donec bibendum, nulla eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus vitae elit. Integer nec libero venenatis libero ultricies molestie semper in tellus. Sed congue et odio sed euismod.</p>
<p>a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>&copy Udacity</p>
</footer>
<script src = "js/app.js"></script>
</body>
</html>
Here's the CSS code
/* ---- Base Rules ---- */
body {
background: rgb(136,203,171);
background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%);
margin: 0;
font-family: 'Merriweather', serif;
color: #fff;
}
/* Typeography General*/
h1 {
font-family: 'Fira Sans', sans-serif;
font-size: 3em;
margin: 2em 1rem;
}
#media only screen and (min-width: 35em){
h1 {
font-size: 7em;
margin: 2em 4rem 1em;
}
}
h2 {
border-bottom: 1px solid #cc1;
font-family: 'Oxygen', Sans-Serif;
font-size: 3em;
color: #fff;
}
p {
line-height: 1.6em;
color: rgb(255, 255, 255);
}
/* ---- Layout Rules ---- */
main {
margin: 10vh 1em 10vh;
}
.main-hero {
min-height: 40vh;
padding-top: 3em;
}
section {
position: relative;
min-height: 80vh;
}
/* ---- Module Rules ---- */
/* Navigation Styles*/
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: left;
}
.navbar__menu li {
display: inline-block;
background-color:green;
color: honeydew;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: rgb(255, 255, 255);
}
.navbar__menu .menu__link:hover .active {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
.active{
background: black;
}
/* Header Styles */
.page__header {
background: green;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
/* Footer Styles */
.page__footer {
background: #000;
padding: 3em;
color: #fff;
}
.page__footer p{
color: #fff;
}
/* ---- Theme Rules ---- */
/* Landing Container Styles */
.landing__container {
padding: 1em;
text-align: left;
}
#media only screen and (min-width: 35em){
.landing__container {
max-width: 50em;
padding: 4em;
}
}
section:nth-of-type(even) .landing__container {
margin-right: 0;
margin-left: auto;
text-align: right;
}
/* Background Circles */
/* Note that background circles are created with psuedo elements before and after */
/* Circles appear to be random do to use of :nth-of-type psuedo class */
section:nth-of-type(odd) .landing__container::before {
content: '';
background: rgba(255, 255, 255, 0.187);
position: absolute;
z-index: -5;
width: 20vh;
height: 20vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(even) .landing__container::before {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
top: 3em;
right: 3em;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 0;
bottom: 0;
z-index: -5;
width: 10vh;
height: 10vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
section:nth-of-type(3n + 1) .landing__container::after {
content: '';
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.2) 100%);
position: absolute;
right: 20vw;
bottom: -5em;
z-index: -5;
width: 15vh;
height: 15vh;
border-radius: 50%;
opacity: 0;
transition: ease 0.5s all;
}
/* ---- Theme State Rules ---- */
/* Section Active Styles */
/* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */
section.your-active-class {
background-color: #cc1;
}
section.your-active-class .landing__container::before {
opacity: 1;
animation: rotate 4s linear 0s infinite forwards;
}
section.your-active-class .landing__container::after {
opacity: 1;
animation: rotate 5s linear 0s infinite forwards reverse;
}
/* Section Active Styles Keyframe Animations */
#keyframes rotate {
from {
transform: rotate(0deg)
translate(-1em)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-1em)
rotate(-360deg);
}
html {
scroll-behavior: smooth;
}
}
and here's the Javascript code
//create navigation menu
//make navigation menu buttons scroll into section
const sections = document.querySelectorAll('section');
const list = document.querySelector('ul');
const fragment = document.createDocumentFragment();
for (const section of sections){
const li = document.createElement('li');
const sect = section.getAttribute('data-nav');
const name = section.getAttribute('id');
li.innerHTML = `<a class="menu__link">${sect}</a>`;
list.appendChild(li);
fragment.appendChild(li);
li.addEventListener('click', (e) => {
e.preventDefault();
section.scrollIntoView({behavior: "smooth"})
})
}
list.appendChild(fragment);
//making active section's highlighted in yellow
window.addEventListener('scroll',() => {
const option =
{
root: null,
threshold:0.7,
rootMargin:'0px'
};
//Using the IntersectionObserver to get the active section
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach((entry) =>
{
if(entry.isIntersecting)//If section is in viewport
{
//adding active classes to the section in view
entry.target.classList.add("your-active-class");
}
else
{
// we are EXITING the "capturing frame" so we remove the active class
entry.target.classList.remove("your-active-class");
//if section is not visible we don't observe it anymore
observer.unobserve(entry.target);
}
console.log(entry.target);
});
}, option);
//doing this to all sections
sections.forEach((section) => {
//activate observer to observe sections
observer.observe(section);
});
});

You're very close! Good call with IntersectionObserver! That's a good native method for this kind of thing.
Basically, you can add an attribute that has the id of the corresponding section to your links
for (const section of sections) {
const li = document.createElement("li");
const name = section.getAttribute("data-nav"); //// CHANGED
const sectId = section.getAttribute("id"); //// CHANGED
li.innerHTML = `<a class="menu__link" data-selects="${sectId}" href="${sectId}">${name}</a>`; //// CHANGED
and then select them by that attribute in your IntersectionObserver:
entries.forEach((entry) => {
let correspondingNavItem = document.querySelector(
//// ADDED
`[data-selects="${entry.target.id}"]`
);
if (entry.isIntersecting) {
//If section is in viewport
//adding active classes to the section in view
entry.target.classList.add("your-active-class");
correspondingNavItem.classList.add("selected-link"); //// ADDED
correspondingNavItem.setAttribute("aria-current", true); //// ADDED
I modified your code in this codepen to show you how this could work: https://codepen.io/karlyanelson/pen/LYWaJyR
Note: the aria-current is to help with accessibility. You can learn more about aria-current here.
Also, to make your links in your navigation actually accessible (ie: able to be used by just a keyboard or screenreader), then they need a valid href. You can just pass in the id of the section you want them to navigate to.

Disable and Enable Scrolling with Javascript

I've been trying to find a solution to enable/disable scrolling with Javascript from the same element but I haven't find anything that worked for me.
In my mind I want to create an if statement that triggers onclick when the hamburger icon is clicked and I see the menu I want to disable the scrolling else I want the scroll effect back since I click again the hamburger icon.
So far the only thing that I have found is only to disable the scroll but I cant bring the scroll back.
Is there a way to achieve that?
HTML
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>About</li>
<li>Work</li>
<li>Contact
</li>
</ul>
</nav>
<section>
<p class="par">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida neque ac egestas venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pharetra purus libero, vestibulum vulputate mauris tristique et. Cras auctor hendrerit mi sed pharetra. Ut convallis dolor vel vestibulum tristique. Sed feugiat metus ut euismod rutrum. Aenean eu nulla mattis felis aliquam placerat nec quis nunc. In aliquam ornare diam, non faucibus massa semper sed. Curabitur id tellus diam.
Duis lorem nunc, varius a orci ut, interdum gravida mi. Proin blandit purus eu dolor mattis faucibus. Praesent mauris dolor, maximus ac ipsum vel, auctor suscipit diam. Nullam non cursus felis. Ut lobortis lacus facilisis molestie tempus. Duis in enim vel mi posuere consectetur vel eu sem. Aliquam pretium condimentum metus in euismod. Duis sed luctus mi. Nunc iaculis suscipit mi, at dictum neque euismod ac. Praesent diam tellus, elementum id ultricies aliquet, efficitur nec dui. Nullam ut sodales elit.
Curabitur suscipit rutrum ligula a consequat. Suspendisse iaculis urna nec rutrum tristique. Phasellus et dui arcu. Donec finibus sagittis venenatis. Donec eu mauris augue. Morbi vitae ligula imperdiet ligula malesuada bibendum in sit amet nibh. Nunc a urna odio. Nam posuere justo ut turpis finibus, ac cursus leo suscipit. Proin lectus justo, finibus auctor faucibus eget, sodales ac tortor. Nam ut ligula mollis, vulputate orci eget, commodo justo. Proin sagittis, ante et iaculis pretium, sapien eros tristique risus, sed imperdiet risus leo laoreet mauris.
Nulla eros arcu, commodo in cursus nec, commodo ut sem. Proin dapibus nunc metus, id efficitur arcu pretium quis. Etiam ut felis vestibulum magna malesuada fringilla eu ac felis. Fusce ac ex arcu. Nam nec dapibus nulla. Aenean eu tincidunt velit. Curabitur eget felis eros. Fusce vitae efficitur nisl. Nam eu facilisis nibh. Sed cursus interdum ex vel tempus. Proin fermentum lacinia ligula, rutrum iaculis magna varius eget. Sed nec auctor purus. Donec viverra, est a volutpat pharetra, tortor lectus sodales erat, a scelerisque enim lectus nec ante. Nullam eu tristique lorem, ut dignissim neque. Aliquam in ipsum iaculis justo gravida sagittis id at felis. Vestibulum iaculis facilisis quam at eleifend.
</p>
</section>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #191818;
color: blue;
}
nav {
height: 10vh;
}
.par {
line-height:2rem;
}
.nav-links {
display: flex;
list-style: none;
width: 30%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
#media screen and (max-width: 768px) {
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav{
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
height: 100vh;
width: 100%;
flex-direction: column;
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
}
JS
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navLinks.classList.toggle("open");
links.forEach(link =>{
link.classList.toggle("fade");
})
function noScroll() {
window.scrollTo(0, 0);
}
window.removeEventListener("scroll", noScroll);
window.addEventListener("scroll", noScroll);
});

remove the scrolling JS
instead, create a toggle for a css class that targets your content, you'd just toggle a no-scroll class on and off
let css handle the scrolling logic: Prevent body scrolling but allow overlay scrolling

JavaScript transition

//obiekt TopBottomBar
function TopBottomBar(obj) {
//properties
this.position = obj.position;
this.message = obj.message;
this.link = obj.link;
this.baseDiv = this.createNewBar();
}
//methods
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else if(this.position === 'bottom' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else{
console.log('Ziomus bar istnieje, tymczasowa wiadomość');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
//dodanie w kolejnosci, ikona, przycisk, X zamkniecia
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if(this.position === 'top'){
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom'){
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
TopBottomBar.prototype.hide = function(){
var elementToDelete = document.getElementById('topBottomBar');
document.body.removeChild(elementToDelete);
}
var topBarparameters = {
message: "Get Widget",
position: "top",
link: '#'
}
var bottomBarparameters = {
message: "Get Widget",
position: "bottom",
link: '#'
}
var upBar = new TopBottomBar(topBarparameters);
var bottomBar = new TopBottomBar(bottomBarparameters);
document.getElementById('up').addEventListener('click', upBar.show.bind(upBar));
document.getElementById('down').addEventListener('click', bottomBar.show.bind(bottomBar));
body
{
background-image: url('background.png');
font-size: 20px;
font-family: Open Sans,sans-serif;
position: relative;
}
#nav
{
position: relative;
font-size: 25px;
width: 100%;
height: 1.5em;
background-color: #C21B1B;
padding-top: 10px;
text-align: center;
}
#nav a
{
text-decoration: none;
font-family: sans-serif;
color: black;
border: 2px solid black;
border-radius: 20px;
display: block;
background-color: #4123C0;
width: 8em;
margin: 0 auto 0 auto;
}
#nav a:hover
{
background-color: #2001A0;
color: white;
}
#container
{
width: 75%;
margin: 0 auto 0 auto;
padding: 10px 0 0 0;
}
#footer
{
width: 100%;
height: 3em;
background-color: #372323;
text-align: center;
color: white;
padding-top: 10px;
}
#topBottomBar
{
color: #f4f4f4!important;
background: #363d4d!important;
display: block;
white-space: nowrap!important;
overflow: hidden;
padding: 5px 42px!important;
text-align: center!important;
left: 0;
right: 0;
position: fixed;
font-size: 0;
z-index: 30000;
}
#topBottomBar.top-animation{
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
#topBottomBar.bottom-animation{
-webkit-transition: bottom 2s ease;
transition: bottom 2s ease;
bottom: 0px;
}
#topBottomBar {
margin: 0;
padding: 0;
border: 0;
box-sizing: content-box!important;
box-shadow: none;
background-clip: padding-box!important;
line-height: 1.2;
vertical-align: middle;
text-align: left;
font-weight: 400;
font-family: inherit;
font-style: normal;
letter-spacing: normal;
text-shadow: none;
text-transform: none;
float: none;
z-index: 2147483635;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
filter: none;
}
#topBottomBar #buttonlink
{
display: inline-block;
text-decoration: none;
cursor: pointer;
line-height: 32px;
font-size: 14px;
font-weight: 700;
max-width: 317px;
text-align: center;
border-radius: 2px;
vertical-align: middle;
padding: 0 20px;
color: #ffffff!important;
background: #ffcd53!important;
font-family: inherit;
}
#topBottomBar .fa{
line-height: 1;
vertical-align: middle;
display: inline-block;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
height: 22px;
width: 22px;
color: #d3d3d3!important;
text-indent: 0!important;
top: 0!important;
left: 0!important;
padding: 10px;
background: 0 0!important;
z-index: -1;
position: absolute;
display: block!important;
text-decoration: none!important;
opacity: .5!important;
}
#topBottomBar .fa:hover
{
animation: colorChange 2s;
}
#keyframes colorChange{
from {color: #c2c2c2;}
to {color: #FFFFFF;}
}
#topBottomBar #closelink
{
display: inline-block;
vertical-align: middle;
font-size: 22px;
height: 22px;
width: 22px;
cursor: pointer;
position: absolute;
padding: 10px;
right: 0;
top: 0;
transition: transform 200ms,opacity 200ms!important;
transition-property: transform, opacity;
transition-duration: 200ms, 200ms;
transition-timing-function: initial, initial;
transition-delay: initial, initial;
}
#topBottomBar #closelink:hover{
animation: colorChange 1s;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}
#topBottomBar .top-fixed
{
top:-42px !important;
}
.bottom-fixed
{
bottom: -42px!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Bar effectschange</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/font-awesome-4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="nav">
Get new version
</div>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac blandit lectus. In hac habitasse platea dictumst. Aenean metus lorem, tincidunt eu enim et, rutrum vehicula sem. Vivamus scelerisque viverra nisl vitae condimentum. Proin ultricies aliquet molestie. Proin faucibus quam in felis egestas malesuada. Fusce convallis leo sem, sed laoreet est eleifend at. Nullam rutrum massa lacus, vel viverra odio consequat eu. Curabitur pharetra ligula auctor pretium placerat. Nulla non arcu porta, placerat lacus vel, pretium tellus. Phasellus tempor, massa quis condimentum bibendum, erat mi rhoncus mauris, sit amet fringilla elit leo id erat. Sed vehicula tellus quis turpis mollis auctor. Praesent quis tempor lectus. Nullam ut tincidunt odio, vitae varius magna.</p>
<p>Duis vel placerat magna. Morbi ac cursus tortor. Pellentesque consequat, turpis ut mollis dictum, arcu diam sodales nisi, at hendrerit nunc velit vel metus. Mauris luctus sed dolor ac feugiat. In luctus erat vel fringilla rhoncus. Nulla id orci maximus, hendrerit nisl varius, hendrerit massa. Maecenas velit mauris, dictum malesuada massa id, varius lobortis orci. Vivamus quis placerat lorem. Suspendisse pellentesque mattis nunc sed semper. Proin et magna suscipit, aliquam ligula et, placerat est. Etiam tempor augue orci, et aliquet erat ultricies efficitur. Vivamus vitae fermentum tortor, nec porttitor ligula. Integer vel dapibus nunc. Vestibulum quis eros pretium, euismod velit id, dapibus sem.</p>
<button id="up">Up</button>
<i class="fa fa-btc" aria-hidden="true"></i>
<button id="down">Down</button>
<p>Aenean lorem enim, condimentum quis augue ultrices, molestie volutpat nibh. Praesent metus mi, dapibus in commodo non, mattis nec dolor. Phasellus a urna sem. Pellentesque sem justo, semper sed iaculis sed, mollis ac risus. Fusce et consectetur nisl, nec fringilla sem. Sed egestas lorem eros, a accumsan sem commodo vitae. Nulla porta, turpis id eleifend facilisis, nibh tellus feugiat diam, sit amet convallis leo diam in sem. Praesent venenatis vitae ante at bibendum. Morbi in mauris quam. Nam quis eros ullamcorper, porttitor elit vitae, hendrerit neque.</p>
<p>Vivamus a bibendum neque. Pellentesque vestibulum id magna at ornare. Sed volutpat molestie dolor, vitae congue ipsum pellentesque at. Duis ornare nunc in lorem ullamcorper rhoncus. Maecenas dictum purus massa, et pulvinar erat maximus ac. Pellentesque in diam consequat, vehicula orci porta, condimentum leo. Morbi ut dui sed massa accumsan commodo. Sed nibh eros, iaculis quis tellus ut, ultricies placerat nisi. Curabitur eu rhoncus ex. Sed interdum tristique purus nec commodo.</p>
<p><p>
</p>Suspendisse vulputate mauris et turpis venenatis congue. Nullam eu rutrum odio, sed aliquet nibh. Aliquam porttitor ultrices laoreet. Pellentesque pulvinar molestie malesuada. Sed pretium vestibulum dolor, scelerisque posuere velit tincidunt non. Sed blandit eleifend dapibus. Ut erat tortor, cursus non consequat pharetra, suscipit eu felis. Proin sit amet massa massa. Sed urna erat, molestie a ante ac, imperdiet cursus nunc. Proin iaculis eros quis diam tincidunt, porttitor convallis nunc luctus. Phasellus vestibulum, sem sit amet sodales ultricies, lorem tortor tempor nisl, non lacinia eros augue sed ex.</p>
</div>
<div id="footer">
<p>Join us in development! </p>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
I am trying to animate a bar made dynamically in javascript, by using a CSS transition. The animation doesn't work. First I create my bar with javascript, and show it based on a click event.
I read that transition with jaascript is added as extra class to existing element. Is it possible that when I make element with javascript and also add the id and class with javascript, the transition happens faster than the original style and it doesn't appear to run at all?
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click',this.hide.bind(this));
} else if(this.position === 'bottom' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
} else {
console.log('Ziomus bar istnieje, tymczasowa wiadomość');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if (this.position === 'top') {
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom') {
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
top-animation and bottom-animation are my css transitions
#topBottomBar.top-animation {
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
The starting point for the top property is -42px, which is the height of my bar. I tested it on an easy example with one div hardcoded in HTML and everything was fine. The div went from -42px top to 0.
EDITED, added whole code, what i want to achieve is to make this bar animated with transition. There are 2 buttons which show bar.