I would like to keep the navbar brand hidden at first when the page loads and only make it appear after scrolling down a certain height.
Have tried below code.
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
document.getElementsByClassName('#logo')[0].style.display = 'hidden';
} else {
document.getElementsByClassName('#logo')[0].style.display = 'visible';
}
});
Please help.
You use getElementsByClassName, and give it an ID
Everything starting with # (hash) is an ID, Everything starting with an . (dot) is a class name. Also, getElementById does not return an array, so you don't need to pick the first element (with [0]).
Try something like:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
document.getElementById('logo').style.display = 'hidden';
} else {
document.getElementById('logo').style.display = 'visible';
}
});
Though, as you are using jQuery, you could also clean it up more and use something like:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#logo').style.display = 'hidden';
} else {
$('#logo').style.display = 'visible';
}
});
or as Reza suggested use:
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#logo').hide();
} else {
$('#logo').show();
}
});
You can make something like this
let scrollerBlock = $(".logo");
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
scrollerBlock.fadeIn(400);
} else {
scrollerBlock.fadeOut(400);
}
});body {
margin: 0;
}
.block {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: #777;
height: 90px;
}
.logo {
display: none;
width: 210px;
height: 70px;
background: url("https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27") no-repeat;
}
.wrapper {
min-height: 9999px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="block">
<div class="logo"></div>
</div>
</div>if you need smoothness
Here The Code, I also added a beta absolute line to help you visualize what happens
if the red line is not visible then the logo disappear
I also change the display from hidden to none because in css there isn't hidden for the display property
try to Run the Snippet below to see the result (make sure then to delete the beta line, following the comments I write for you)
window.addEventListener("scroll", function(e) {
if (window.scrollY > 1000) {
document.getElementById('logo').style.display = 'none';
document.getElementById('betaLine').textContent = "1000px THE LOGO IS HIDDEN!";
} else {
document.getElementById('logo').style.display = 'grid';
/* delete this below, is only for seeing where is 1000 */
document.getElementById('betaLine').textContent = Math.round(window.scrollY) + "px";
}
});body {
margin: 0;
}
nav {
background-color: blue;
width: 100vw;
height: 3em;
display: grid;
place-items: center start;
padding-left: 1em;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
main {
display: grid;
gap: 0.5em;
}
main div {
height: 100vh;
width: 100vw;
background-color: lightblue;
display: grid;
place-items: center;
}
#betaLine {
height: 0.2em;
width: 100vw;
color: red;
background-color: red;
box-shadow: 0 0 1em red;
position: absolute;
top: 1000px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<nav>
<div id="logo">
CompanyLogo.
</div>
</nav>
<main>
<div>1 section, scroll to the next</div>
<div>2 section, scroll to the next</div>
<div>3 section, scroll to the next</div>
<div>4 section, the last</div>
</main>
<!-- delete this below, is only for seeing where is 1000 -->
<div id="betaLine">
</div>
</body>
</html>