Scroll Up Reveal for Sticky Navigation

Site URL: http://www.whoiscooper.com/

I'd like my navigation to disappear when scrolling down, and reappear when scrolling up. 

You need jQuery to do this. Do you use Personal or Business Plan?

business plan

10 hours ago, bangank36 said:

Add this to Settings->Advanced->Code Injection->Footer

<style>
	header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .shrink header,
    .shrink .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var body = document.body;
      var scrollDown = "shrink";
      let scrollOffset = 50;

      window.addEventListener("scroll", () => {
        const currentScroll = window.pageYOffset;
        if (currentScroll <= scrollOffset) {
          body.classList.remove(scrollDown);
          return;
        }

        if (currentScroll > scrollOffset) {
          // down
          body.classList.add(scrollDown);
        } 
      });
    });
</script>

 

This is so close to what I'm looking for. Is it possible to have the navigation reveal itself as soon as I start scrolling up? For example, if I'm at the footer of a long page, and I start scrolling up, can the navigation show up before reaching the top of the page? 

Thank you for your help. 

10 hours ago, bangank36 said:

I just updated the code

Thank you. But now the "Quick Subscribe" newsletter heading in the footer is behaving weirdly when I reach the bottom of the page. Almost like it want's to recede like the navigation...

Such is the world of code, I presume. 

Easy to fix? 

11 minutes ago, bangank36 said:

Updated snippet

Yes! Thank you so much. You rock. 

2 minutes ago, bangank36 said:

Your site is well done, is that yours or client?

Thanks! It's mine. Still making little tweaks. It's a work in progress. 

7 minutes ago, bangank36 said:

Kindly provide the template name if you don't mind, I think this solution can help others with the same template as well

I believe it's Vow.

Under help section, it reads: Version 7.0- Brine family (L & M template). 

Hope that helps. 

On 12/31/2020 at 10:51 PM, bangank36 said:

<style>
	header.Header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .scroll-down header.Header,
    .scroll-down .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

 

Hi @bangank36 I also use a 7.0 Brine family template (Sofia), but the code above doesn't work for me. Any idea? Site URL is https://gregorylassale.com

Thanks in advance. 

Got it. I had removed my fixed nav CSS thinking it would conflict with your code, but it looks like it's the other way around and your script needs a fixed header in order to work?

All good now. Thanks!

@bangank36 Could your script be modified so that the navigation is revealed if the person stops scrolling (or if they click a link that takes them down the page)? 

Following up on this. Is there a way to modify the code below so that the navigation bar slides out after a short delay whenever the scrolling stops?

<style>
	header.Header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .scroll-down header.Header,
    .scroll-down .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

On 1/1/2021 at 5:51 AM, bangank36 said:

Add this to Settings->Advanced->Code Injection->Footer

<style>
	header.Header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .scroll-down header.Header,
    .scroll-down .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

 

Hello @bangank36, I've been wanting to apply this on our site (https://www.artinis.com) but got no luck using the script above. I'm using the Fulton template. Would you kindly take a look?

Thanks before.

@anitaartinis try this new code

<style>
	header#header {
      transition: transform 0.4s;
    }
    .scroll-down header#header {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

@tuanphan Thank you for your help!

I tried your code but it also doesn't make any effect, unfortunately.

14 hours ago, anitaartinis said:

@tuanphan Thank you for your help!

I tried your code but it also doesn't make any effect, unfortunately.

try edit this

Quote

 transform: translate3d(0, -100%, 0);

to this

Quote

 transform: translate3d(0, -100%, 0) !important;

This is what I've been searching months for! I'm curious if I can I prevent the menu nav from appearing until they are back up at the top of the page?

http://www.southernsunevents.com

PW: sse2020

On 1/1/2021 at 5:51 AM, Beyondspace said:

Add this to Settings->Advanced->Code Injection->Footer

<style>
	header.Header,
    .Mobile-bar {
      transition: transform 0.4s;
    }
    .scroll-down header.Header,
    .scroll-down .Mobile-bar {
      transform: translate3d(0, -100%, 0);
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const scrollUp = "scroll-up";
            const scrollDown = "scroll-down";
            let lastScroll = 0;

            window.addEventListener("scroll", () => {
              const currentScroll = window.pageYOffset;
              if (currentScroll <= 0) {
                body.classList.remove(scrollUp);
                return;
              }

              if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
                // down
                body.classList.remove(scrollUp);
                body.classList.add(scrollDown);
              } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
                // up
                body.classList.remove(scrollDown);
                body.classList.add(scrollUp);
              }
              lastScroll = currentScroll;
            });
    });
</script>

 

Hi, this is what I've been looking for ...  the header to go away when scrolling down, but reappear when scrolling up. I have Wexley 7.0 and this code doesn't work. I Do you happen to know if there is a code for this? Thanks in advance.

On 3/31/2023 at 6:50 PM, lina1570047784 said:

 

Hi, this is what I've been looking for ...  the header to go away when scrolling down, but reappear when scrolling up. I have Wexley 7.0 and this code doesn't work. I Do you happen to know if there is a code for this? Thanks in advance.

Can you share link to your site?