Show navbar brand only after scrolling certain height-CodePudding

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.

CodePudding user response：

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();
  }
});

CodePudding user response：

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 >


  <div >
    <div ></div>
  </div>

</div>

if you need smoothness

CodePudding user response：

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>