How to make header reappear on scroll up?

I Need Help
1

On my two smaller break points (SM and XS) the header/nav-bar is not sticky in order to maximize screen real estate when scrolling down the pages, but I would like the header/nav to reappear instantly when scrolling up. Is there a way to do this? Thank you very many!

3

Could I just jump on this one and ask where you would actually put the code?

I understand what it’s doing, just don’t know if it’s header, footer, before/after etc……

Thanks.

1 Like
4

Place it in the footer.

Usually JavaScript is manipulating the DOM, so you want all your elements on the page to exists (load) before the JavaScript or it won’t find them.

This isn’t always the case because you can have event listeners etc, but the footer is your safest place to put any scripts.

1 Like
5

So we could simply add this to our footer and get the same effects?

<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}
</script>
6

You need some CSS also, and to assign the ID of your navbar into the script.

1 Like
7

Something like this?

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px">
</div>
9

Exactly

1 Like
10

No. You can use the Blocs menu.

11

Cool, I have v1.1

12

Hi Jerry, that’s almost what I’m looking for but instead of the nav bar appearing when I start to scroll down the page, I would like it to reappear only when I scroll up. That is, on page load the navbar is visible and then scrolls upwards off screen when I start to scroll down the page. But when I scroll upwards it instantly drops downs no matter where I am on the page. Maybe there’s a tweak in the W3Schools code I could do to reverse what they’ve got. I’ll look. Cheers.

13

More than a tweak, that code is based on being 20px from the top of the page. It’s not designed for what you want to achieve.

SmartNav is a good option.

15

Perfect. Found exactly what I was looking for. Cheers