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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Remove this code

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

and replace with

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 4 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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