Jump to content
Search Community

Gsap scroll up header active

Sukru test
Moderator Tag

Recommended Posts

Hi, here is how I can make the header appear only when the scroll moves up. I think smooth scroll is preventing this because of its own page calculation.

I can see it when I go to the top of the page. I want to see the header when I scroll up.

 

Like the example here;

https://aydindoganvakfi.org.tr/

 

See the Pen RwxKdRR by sukruemanet (@sukruemanet) on CodePen

Link to comment
Share on other sites

Hello Sukru,

 

I would recommend not using jQuery for this - more so I don't think it will even easily work like this with the smooth-scrolling active (might be wrong on that though).

 

There is an example on the ScrollTrigger demos page that shows a way for how to handle fixed navs/headers like that.

 

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

 

When using smooth-scrolling like that, you will have to make sure though, that any elements with positioned: fixed are NOT inside your #content, as the trnsforms applied for the smooth-scrolling will change the context for the position: fixed and thus will make them scroll with the flow instead of staying fixed where you'd expect them to.

 

Here is your example changed up a bit.

 

See the Pen wvpgORj by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

12 minutes ago, akapowl said:

Hello Sukru,

 

I would recommend not using jQuery for this - more so I don't think it will even easily work like this with the smooth-scrolling active (might be wrong on that though).

 

There is an example on the ScrollTrigger demos page that shows a way for how to handle fixed navs/headers like that.

 

 

 

 

When using smooth-scrolling like that, you will have to make sure though, that any elements with positioned: fixed are NOT inside your #content, as the trnsforms applied for the smooth-scrolling will change the context for the position: fixed and thus will make them scroll with the flow instead of staying fixed where you'd expect them to.

 

Here is your example changed up a bit.

 

 

 

 

Hello again akapowl,

http://clients.super-agency.com/test/waternet/

 

Actually, the header should be "position:absolute", can it be "position:fixed" after it? I was trying to do it this way as it would be more suitable for the project

Link to comment
Share on other sites

If you inspect the example site you posted, they also have it positioned fixed.

 

I'm not sure how much sense it would make / what advantage you would gain to first have it positioned absolute and then switch over to have it positioned fixed.

 

You could probably achieve that by pinning the header for the whole page scroll, but you will likely have to make some changes to the initial setup.

 

Something like this maybe.

 

I really wouldn't suggest doing that though, as it only complicates things, where it iMHO wouldn't even be neccessary 🤷‍♂️

 

See the Pen dyJNLOV by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, akapowl said:

Gönderdiğiniz örnek siteyi incelerseniz, onlar da sabit konumlandırmışlar.

 

Ne kadar mantıklı olacağından/ilk önce mutlak olarak konumlandırmanın ve sonra sabit konumlandırmak için geçiş yapmanın ne avantajını elde edeceğinizden emin değilim.

 

Bunu muhtemelen tüm sayfa kaydırma için başlığı sabitleyerek başarabilirsiniz, ancak muhtemelen ilk kurulumda bazı değişiklikler yapmanız gerekecektir.

 

Böyle bir şey belki.

 

Yine de bunu yapmayı gerçekten önermem, çünkü iMHO'nun gerekmediği durumlarda sadece işleri karmaşıklaştırır  🤷‍♂️

 

 

 

 

Thank you very much akapowl  of course i will do my future fictions as you say :)

Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...