Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Scroll Up Reveal for Sticky Navigation


whoiscooper

Question

  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: http://www.whoiscooper.com/ I'd like my navigation to disappear when scrolling down, and reappear when scrolling up.   

business plan

Add this to Settings->Advanced->Code Injection->Footer <style> header.Header, .Mobile-bar { transition: transform 0.4s; } .scroll-down header.Header, .scroll-

14 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
Posted (edited)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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. 

Link to post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post

Create an account or sign in to comment

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


×
×
  • Create New...