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

how to highlight the navigation bar using only HTML, CSS and Javascript - 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.

Related

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>

All body content moves up and below the navigation (HTML & CSS)

I've tried a few suggestions like removing overflow from the body, adding a z-index to header and padding-top but nothing seems to work.
It worked fine at first but then I implemented a lot of Lorem Ipsum text. All the content just slides up and below the navbar. I've attached a JS fiddle to explain.
I tried the whole body overflow and tried the fixed/relative header positions. Nothing works.
Any input would seriously be appreciated A LOT.
I would love some help in how can I make the nav stick but not really stay fixed when I scroll down.
And of course, how to make the contents not overflow horizontally.
Please help!
CSS
html,
body {
position: absolute;
width: 100%;
top: 0;
min-height: 100vh;
font-family: sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
box-sizing: border-box;
}
#logo {
max-width: 15%;
}
.menu-wrapper {
background-color: white;
}
.header {
z-index: 1000;
width: 100%;
margin: 1.2em;
position: fixed;
background-color: black;
}
#about {
position: absolute;
max-width: 100%;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}
.about-par {
font-size: 1em;
}
.header ul {
padding: 0;
list-style: none;
overflow: hidden;
margin-right: 2em;
}
.header li a {
display: block;
color: blue;
text-decoration: none;
font-size: 1em;
}
.header li a:hover,
.header .menu-btn:hover {
color: black;
}
.header li a:active,
.header .menu-btn: active,
{
color: blue;
}
.header li a:active {
color: blue;
}
.header .logo {
color: black;
display: block;
float: left;
font-size: 1.1em;
padding: 12px;
margin-left: 1em;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 40px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: black;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon: before {
background: transparent;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 340px;
background-color: black;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* Responsive */
#media only screen and (max-width: 768px) {
.header li a {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: white;
}
.header li a:hover {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: blue;
}
}
#media only screen and (min-width: 768px) {
.menu-wrapper {
width: 100%;
}
.header li {
float: left;
}
.header .logo {
line-height: 1;
}
.header li a {
color: blue;
padding: 0px 30px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, width=device-width shrink-to-fit=no">
<title>Hello! </title>
</head>
<body>
<div class="empty"></div>
<div class="all">
<div class="menu-wrapper">
<header class="header">
Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>More</li>
<li>More2</li>
</ul>
</header>
</div>
</div>
<div class="row">
<div class="container-fluid" id="about">
<h5>Text</h5>
<div class="col-lg-12">
<article>
<p class="about-par">
Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
<br>
Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
<br>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.
<br>
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.
<br>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<br>
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</div>
</div>
</div>
</body>
</html>
JSFIDDLE
https://jsfiddle.net/janie2000/pf3L4y1d/5/
Thank you so much.

You want for header to always stay on top, but to not cover your content, correct?
If i got you right then what you need to do is to to change your main content wrapper which is #about element, you need to have only this element scrollable, not whole page.
For this i propose this css:
#about {
max-width: 100%;
position:relative;
top:100px;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
height:100px;
overflow:scroll;
}
So here we are chaging the position to be relative, so we can move the content down by the height of navigation (top:100px)
Then we limit the height of this component (height:100px) and making it scrollable (overflow:scrool) - so that you can scroll, and when you do - you scrolling on the content, not the whole page, so navbar with fixed position is staying on top
Here is the fiddle - https://jsfiddle.net/t2a4938f/12/
I've set approximate values, you can play around for better view
UPDATE
And if you want for the content to take full height of the screen (not limiting to some strict height like above - 100px), you could use height:100vh

Because you are using bootstrap, I link you my jsfiddle that should work for you.
No css or js needed, bootstrap will do the work for you
JSFIDDLE: https://jsfiddle.net/9yeb023u/1/
I created a basic navbar but you can customize it, if you have any problem go to the documentations of bootstrap at this link:
https://getbootstrap.com/docs/4.5/getting-started/introduction/

The header is sticky and the body content would always below the header.
h.header {
width: 100%;
top: 0;
position: sticky;
background-color: black;
}
#about {
max-width: 100%;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}

How to show scrollbar on mouse over?

If you go to youtube, you can see how their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been trying to replicate this, but my div only shows the scrollbar once I start actually scrolling.
I have overflow-y: auto;, but I've also tried it with overflow-y: scroll;, which had the same effect.
How can I make the scrollbar visible right away?

you can try this .. maybe it will help you..
it's not looking good but i think it should work..
i use scroll event . if you need use wheel event . set time delay as you need...
(function () {
var timer;
document.querySelector('div').addEventListener('scroll', function (event) {
if (event.type == 'scroll') {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
}
clearTimeout(timer);
timer = setTimeout(refresh, 300);
});
var refresh = function () {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
};
})();
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by mouseover and mouseleave event..
document.querySelector('div').addEventListener('mouseover', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
});
document.querySelector('div').addEventListener('mouseleave', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
});
html{
scroll-behavior: smooth;
}
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
position: fixed;
margin-right: -10px;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by hover effect
.mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin:10px;
}
.mostly-customized-scrollbar::-webkit-scrollbar {
display: none;
}
.mostly-customized-scrollbar:hover::-webkit-scrollbar {
display: block;
cursor:pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="mostly-customized-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>

try this:
#container {
margin: 20px;
height: 100px;
border: solid 1px red;
background-color: #ddd;
overflow-y: hidden;
}
#container:hover {
overflow-y: scroll;
}
<body>
<div id="container">
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
</div>
</body>

Implement preloader in website

I have created this animation and I would like to use it as a preloader.
Am I able to use an animation that is structured by html,css and js or should I create a .gif or a simple css animation?
If I can use it, how can I implement it in my website? I have seen a few tutorials where most people create a css animation and call the class to body and such, my issues is a different story.
var bar = $('span');
var p = $('.noumero');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length-1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
p.html(current);
if (current === end) {
clearInterval(interval);
}
};
interval = setInterval(countUp, (2000 / (end + 1)));
div.meter {
position: relative;
width: 400px;
height: 4px;
margin-top: 50px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1.8s linear;
-moz-animation: grower 1.8s linear;
-webkit-animation: grower 1.8s linear;
-o-animation: grower 1.8s linear;
position: relative;
top: -1px;
left: -1px;
background-color:rgba(255,0,0,1);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.theR{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.the255{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.theline{
width:255px;
float:left;
font-size:24px;
font-weight:bold;
color:red;
float:left;
display:block;
}
#keyframes grower {
0% {
width: 0%;
}
}
#-moz-keyframes grower {
0% {
width: 0%;
}
}
#-webkit-keyframes grower {
0% {
width: 0%;
}
}
#-o-keyframes grower {
0% {
width: 0%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="meter">
<p class="theR">R</p>
<span style="width:255px;" class="theline"></span>
<p class="noumero the255"></p>
</div>
<div style="clear:both"></div>

You can set content of document to be displayed to display:none at css; use $.holdReady() to hold .ready() handlers; .fadeToggle() to fade out .meter element when animation completes and fade in content of document once .fadeToggle() of .meter container completes
$.holdReady(true);
var bar = $('span');
var p = $('.noumero');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length - 1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
p.html(current);
if (current === end) {
clearInterval(interval);
$(".meter").fadeToggle(500, function() {
$.holdReady(false);
})
}
};
interval = setInterval(countUp, (2000 / (end + 1)));
$(document).ready(function() {
$(".content").fadeToggle(5000)
})
div.meter {
position: relative;
width: 400px;
height: 4px;
margin-top: 50px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1.8s linear;
-moz-animation: grower 1.8s linear;
-webkit-animation: grower 1.8s linear;
-o-animation: grower 1.8s linear;
position: relative;
top: -1px;
left: -1px;
background-color: rgba(255, 0, 0, 1);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.theR {
float: left;
font-size: 24px;
font-weight: bold;
color: rgba(255, 0, 0, 1);
float: left;
display: block;
margin-top: 0px;
font-family: 'Montserrat', sans-serif;
}
.the255 {
float: left;
font-size: 24px;
font-weight: bold;
color: rgba(255, 0, 0, 1);
float: left;
display: block;
margin-top: 0px;
font-family: 'Montserrat', sans-serif;
}
.theline {
width: 255px;
float: left;
font-size: 24px;
font-weight: bold;
color: red;
float: left;
display: block;
}
#keyframes grower {
0% {
width: 0%;
}
}
#-moz-keyframes grower {
0% {
width: 0%;
}
}
#-webkit-keyframes grower {
0% {
width: 0%;
}
}
#-o-keyframes grower {
0% {
width: 0%;
}
}
.content {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="meter">
<p class="theR">R</p>
<span style="width:255px;" class="theline"></span>
<p class="noumero the255"></p>
</div>
<div style="clear:both"></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac tellus egestas, mattis arcu quis, tincidunt dui. Pellentesque pretium finibus sem, vitae egestas magna sollicitudin sed. Proin ac lectus eget magna porta molestie. Mauris enim tellus, iaculis eget lacus sit amet, varius fringilla augue. Vivamus aliquet lacinia ipsum eget aliquam. Sed et ex neque. Curabitur hendrerit faucibus dignissim. Sed id luctus nunc. Suspendisse ac enim at leo dictum fermentum. Phasellus congue quis nibh at aliquam. Fusce hendrerit dui vel eros tincidunt, id efficitur tellus auctor. Pellentesque et mi placerat eros consequat suscipit. Proin a placerat velit. Suspendisse quis laoreet metus. Integer tristique congue suscipit.
Sed nec accumsan ligula. Duis sit amet iaculis nibh. Suspendisse erat nulla, tincidunt id nibh eu, placerat aliquet ex. Vestibulum sed feugiat magna. Nulla facilisi. Morbi dictum lacinia enim vel commodo. Donec commodo, magna id fringilla varius, dui quam laoreet sem, ac interdum ligula eros non leo. Ut tristique ultricies lobortis. Aliquam justo sapien, malesuada tincidunt commodo et, feugiat in leo. Vivamus eu justo dui. Etiam malesuada magna ut metus malesuada, et dictum ex luctus. Phasellus luctus mauris nisl, id ultricies sem viverra sit amet. Vestibulum commodo nec urna eget dapibus. Integer eu congue purus. Suspendisse gravida convallis nisl ut ullamcorper. Maecenas aliquam orci vestibulum ligula porta, in porttitor libero consequat.
Aliquam eleifend, nisl faucibus elementum ornare, leo mi venenatis dolor, in viverra libero libero vel urna. Curabitur ac enim porta, vulputate tortor et, ultricies felis. Sed augue elit, ultrices in maximus ac, volutpat vel ex. Mauris ut porta erat. Ut eget metus euismod, elementum neque eget, condimentum lacus. Nunc placerat metus at aliquam elementum. Maecenas hendrerit aliquam nunc, at rutrum nunc auctor et. Nam gravida placerat orci, nec euismod justo dapibus in.
Vivamus arcu lectus, pulvinar aliquet mauris eget, suscipit ornare dolor. Cras convallis metus a nisi feugiat volutpat. Sed et tellus ultrices, pulvinar tortor vel, viverra lacus. Morbi ligula ipsum, cursus et sem id, suscipit aliquet ex. Proin interdum id sem nec tristique. Pellentesque vel euismod odio. Praesent porttitor ornare tellus vitae eleifend. Ut ac congue erat.
Nullam in tincidunt sem. Maecenas congue sodales malesuada. Quisque non elit ac risus facilisis sagittis. Duis ultricies lectus eget augue molestie volutpat. Vestibulum at urna sit amet arcu consectetur condimentum. Vivamus ultricies vehicula lacus sodales tristique. Curabitur at est tincidunt felis convallis ullamcorper. Nulla libero turpis, varius quis magna a, ultricies dapibus dolor. Suspendisse diam dui, bibendum ut convallis et, posuere nec magna. Sed iaculis orci in augue auctor, a rhoncus leo elementum. Donec lobortis sed nisl sit amet viverra. Donec pharetra urna eget faucibus egestas.
</div>

For me the simple way would be to use spinner like the ones that you can find in FontAwesome. But If you want to integrate your animation as preloader, you need to call an other function that will check the status of your loading, and if it's improving, you call countup:
interval = setInterval(checkLoading, (2000 / (end + 1)));
In checkLoading you can use a simple mathematical equation to know exactly your progress:
function checkLoading(){
var elementLoaded=countElements();
var realState = (elementLoaded/allElementsToLoad)*end;
while (realState<curent){
countUp();
}
}

Develop Reference

JavaScript is the programming language of the Web.