Make navigation appear when scrolling up

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? :-) 

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

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

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

@tuanphan 🤯🤯🤯 wow, thank you!! Any idea how to get rid of the underline and few pixels of white space as well? 

here is my code for the header:

header#header {
	border: 4px solid #000;
    }
.header-nav {
    padding: 10px;
	}

site: https://tarantula-calliope-fl4m.squarespace.com/

pass: squarespace

Remove this code

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

and replace with

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

@tuanphan thank you!!!!!!!

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

 

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

11 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

div#headerWrapper {
    position: absolute !important;
}

 

Thank you so much for your response