Change navbar after scrolling the page [closed]

Change navbar after scrolling the page [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I wanted to know how I can change the navbar after scrolling the page.
Starting situation, as soon as the user arrives on the site he finds a navbar, immediately as soon as he scrolls the page the other navbar appears as happens in this theme: https://kendall.qodeinteractive.com/manicure/

There are multiple methods to do this, but the simplest is to use two navbars.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 400px;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.navigation.is-fixed {
position: fixed;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<h1>Content</h1>
</header>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > headerHeight) {
navbar.classList.add('is-fixed');
} else if (scrollValue < headerHeight) {
navbar.classList.remove('is-fixed');
}
}
window.addEventListener('scroll', stickyElement);
</script>
</body>
</html>
JSFiddle demo

Here is a working example of what I think you are attempting to achieve. You were almost there other than some styling and a minor tweak to JS.
JSFiddle Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
body {
background-color: brown;
top: 0;
min-height: 100vh;
width: 100vw;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 20px;
width: 80%;
left: 10%;
height: auto;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.content {
position: relative;
top: 100px;
width: 80%;
left: 10%;
height: 100%;
background-color: purple;
}
.navigation.is-scrolled {
position: fixed;
background-color: green;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
</header>
<div class="content">
<h1>Content</h1>
</div>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > 101) {
navbar.classList.add('is-scrolled');
} else if (scrollValue < 100) {
navbar.classList.remove('is-scrolled');
}
}
window.addEventListener('scroll', stickyElement);
</
script>
</body>
</html>

Actually this theme has 2 navbar, using ScrollTop in Jquery to catch event scroll then use hide the first navbar and show the 2 fixed navbar.

Related

Why text block is equal to size of the image?

I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.
This is how it looks like:
I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)
I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...
Index.html :
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 1;
background-image: url("hero-img.jpeg");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
}
.text span {
position: relative;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Text On Scroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
<script>
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
</script>
</body>
</html>

You need to commented highlight css property on class .image-container{overflow: hidden; z-index: 1;} and increase top:50% to top:70% on class .text.text-dark{top: 70%;}
Note: Check on Full page
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
/* overflow: hidden; */
/* z-index: 1; */
background-image: url("https://i.stack.imgur.com/fcbpv.jpg?s=48&g=1");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
top: 70%;
}
.text span {
position: relative;
display: block;
}
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>

How to fix smooth navigation fixed in Jquery?

Hello I have this smooth scrolling navigation fixed when user's scroll down to the site.. But when the page go up and removes the class nav_fixed the header part jumps through it.. How do I tweak my jquery code that also enables smooth scrolling of the header part when user scrolls up.. As you can see in the sample below the behavior of the header jumps and it's kind of a minor bug.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>

May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
var offset = $('header').offset();
$(window).bind('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else if(scrollTop == offset.top) {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
body{
margin: 0;
}
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
</body>
</html>

Showing the div after scrolling down the website

I want to set the animation of the element while scrolling down the page. I want to use only JavaScript to achieve that.
I wanted it to work like this: There is no animation, but when you scroll down to second container, the JS sets the animation and the content inside the container is shown.
The problem is, when I load the page, there is no animation (That's good). When I scroll down, there is still no animation (That's bad!) but when I refresh the page with F5 while being on the bottom of the site, the animation shows up but still not showing my element with blue background.
Here is my full code for this part:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
});
</script>
<body>
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
I'm learning JS so it's important to me to not use any libraries :P
Thanks a lot

I modified your code a bit. You were listening for DOMContentLoaded event which is fired only once (after the DOM is completely loaded), instead of window scroll event.
window.onscroll = function() {
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
}
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
Also, your syntax for defining keyframe was incorrect. It is
#keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
And not
#keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}

My slideshows are not working with node in localhost

As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

Navbar is not hiding on scroll using javascript

I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.

Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.

From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.

Develop Reference

JavaScript is the programming language of the Web.

Change navbar after scrolling the page [closed] - javascript

Actually this theme has 2 navbar, using ScrollTop in Jquery to catch event scroll then use hide the first navbar and show the 2 fixed navbar.

Related

Why text block is equal to size of the image?

How to fix smooth navigation fixed in Jquery?

Showing the div after scrolling down the website

My slideshows are not working with node in localhost

Navbar is not hiding on scroll using javascript

Categories

Resources