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

On 1/1/2021 at 8:44 AM, whoiscooper said:

business plan

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>

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. 

11 hours ago, whoiscooper said:

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. 

I just updated the code

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? 

46 minutes ago, whoiscooper said:

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? 

That interesting, i should recheck

2 hours ago, whoiscooper said:

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? 

Updated snippet

11 minutes ago, bangank36 said:

Updated snippet

Yes! Thank you so much. You rock. 

5 minutes ago, whoiscooper said:

Yes! Thank you so much. You rock. 

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

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. 

10 minutes ago, whoiscooper said:

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

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

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. 

13 minutes ago, whoiscooper said:

I believe it's Vow.

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

Hope that helps. 

Thank you, have a great day

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. 

22 hours ago, GregLassale said:

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. 

Did you follow all steps, it working fine when I try

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!

44 minutes ago, GregLassale said:

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!

the script based on  default template

@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;