Hide Header only on scroll up - code injection or Custom CSS

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

On 2/26/2022 at 10:40 PM, alexanderfantini said:

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

 

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

Have you tried setting not fixed position for header?

3 hours ago, bangank36 said:

Have you tried setting not fixed position for header?

Hello there!!

Thank you very much for getting back to me!

I can't seem to be able to see that floating window (as I believe I'm currently using Squarespace 7.00)

I can see header options in the Site Style page but nothing about fixed position!

On 2/26/2022 at 10:40 PM, alexanderfantini said:

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

 

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

With 7.0 version, you can try adding to Home > Design > Custom Css

#siteHeader {
  position: relative;
}
#mainContent.main-content {
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

22 hours ago, bangank36 said:

With 7.0 version, you can try adding to Home > Design > Custom Css

#siteHeader {
  position: relative;
}
#mainContent.main-content {
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you very much! This fixes the scroll up issue but now the header does not reappear once I reach the bottom of the page!

The idea is that I treat the top of the page as a start of the UX and when the users scrolls to the very bottom, the footer and header comes back in same as the main navigation page.

See www.alexanderfantini.com/creative and www.alexanderfantini.com/intro

Without your code the header appears once the viewer reaches the end of page and I'd love to retain that feature!

Is it possible?
Many thanks in advance!

On 3/6/2022 at 6:09 AM, alexanderfantini said:

Thank you very much! This fixes the scroll up issue but now the header does not reappear once I reach the bottom of the page!

The idea is that I treat the top of the page as a start of the UX and when the users scrolls to the very bottom, the footer and header comes back in same as the main navigation page.

See www.alexanderfantini.com/creative and www.alexanderfantini.com/intro

 

Without your code the header appears once the viewer reaches the end of page and I'd love to retain that feature!

Is it possible?
Many thanks in advance!

Have you found the solution yet?

On 3/10/2022 at 6:58 AM, tuanphan said:

Have you found the solution yet?

Hey there, no unfortunately I still haven't found a solution as I think it requires a custom js script to tweak the scroll behaviour 😞