Jump to content

Scroll Up Reveal for Sticky Navigation

Recommended Posts

  • 2 months later...
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>

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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. 

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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? 

Edited by whoiscooper
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 minutes ago, whoiscooper said:

Yes! Thank you so much. You rock. 

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 months later...
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. 

Link to comment
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

image.thumb.png.e8c4d6e380cd92483519b6b15f0682b3.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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>

 

Link to comment
  • 3 weeks later...
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.

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.