Sukru Posted March 25, 2022 Share Posted March 25, 2022 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 More sharing options...
akapowl Posted March 25, 2022 Share Posted March 25, 2022 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 2 Link to comment Share on other sites More sharing options...
Sukru Posted March 25, 2022 Author Share Posted March 25, 2022 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 More sharing options...
akapowl Posted March 25, 2022 Share Posted March 25, 2022 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 2 Link to comment Share on other sites More sharing options...
Sukru Posted March 25, 2022 Author Share Posted March 25, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now