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

Make navigation appear when scrolling up


Recommended Posts

Site URL: http://collaborativeperformance.org

Hi fellow Squarespace users 🙂

On our website we are currently using sticky navigation, so the navigation follows when scrolling on our page.

I would really like to change that to a normal navigation that goes away when scrolling down, BUT that appears again when you, anywhere on the site, scroll back up just a tiny bit (not scroll all the way to the top).

Unfortunately I haven't been able to google my way to a solution

Does anyone know how to accomplish this? :-) 

Link to post
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Remove this code header#header { border: 4px solid #000; } and replace with .header-announcement-bar-wrapper { border: 4px solid #000; }  

Posted Images

It calls: scroll up effect

It needs JavaScript + CSS to solve. You need a Business Plan or higher.

Some guide

https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756

or Google: jquery scroll up header

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 2 months later...
2 hours ago, jdillagodzilla said:

@tuanphan I'm in 7.1 and can't figure out how to do this for the life of me! I read both articles but really couldn't make heads or tails of how to translate for SS.

 

Edit Site Header > Style > Position: Fixed - Style: Scroll up

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 4 months later...
On 5/22/2020 at 4:41 PM, tuanphan said:

Remove this code


header#header {
	border: 4px solid #000;
    }

and replace with


.header-announcement-bar-wrapper {
    border: 4px solid #000;
}

 

 

Hello @tuanphan
I would like the CSS to hide the header/navigation on my website once someone starts scrolling down. It always stays at the top.

here's the url:

www.jeffwalkerphotography.com

Link to post
On 10/14/2020 at 11:29 PM, Asiya said:

 

Hello @tuanphan
I would like the CSS to hide the header/navigation on my website once someone starts scrolling down. It always stays at the top.

here's the url:

www.jeffwalkerphotography.com

Add to Home > Design > Custom CSS

div#headerWrapper {
    position: absolute !important;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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