How to make a child element fixed but in the same time relative
Hello, I have one very big problem. I have nav in a div and should make it sticky when scroll trough the page, but the nav should not leave its parent div, but the div should stays in place. The div is a parent of some children, the nav is one of them. I want to keep the functionality where the nav is positioned based on the parent div styles, but also want when I scroll, only the navmove
28 Replies
👋
Can you put the relevant code in a codepen https://codepen.io/pen/ (or similar). That would make it a lot easier for somebody to help you.
Without seeing the code it is hard to understand exactly what it is that you need to do.
I suspect that you need to use
I suspect that you need to use
position: fixed;
As long as you don't give it a top (or any other positioning), it will remain in it's place on the screen, wherever that might be, when it was rendered within it's parent.hello
I will provide everything you need
because I already asked in some other groups, they told me to post the code and a live version to it, so I will do the same here
https://github.com/bockster6669/shivam-portfolio/settings
Create Next App
Generated by create next app
when you scroll the page and the nav comes to the top to become sticky but sticky depends on its parent, so the other option is fixed, but then the element is no longer related to its parent, so not parent styles will apply to its child nav
I want to keep this functionality where parent styles will apply to its child nav, but in the same time when I scroll the page and the nav comes to the top to become sticky'
You might want to use position sticky and then use top: 0; so if the nav is not at top 0 you can scroll then it sticks 🙂
it looks nice make this a codepen or something
what did you even write this in
it is not in your portfolio github you sent either
Assuming that you can use JS, and that I understand what it is that you want to achieve, this could be achieved, using the IntersectionObserver.
Quick demo: https://codepen.io/cbolson/pen/VwJKyxw
This is probably also possible with more modern CSS animation-timeline properties but bear in mind that these don't yet work on all browsers.
What parent styles do you mean that you want to inherit? If the nav is position fixed, it still inherits its color from the parent , what styles are you concerned about would not be inherited?
styles like flexbox layout
can you share your code? im not seeing a sticky or fixed nav here https://shivam-portfolio-indol.vercel.app/
Create Next App
Generated by create next app
yea its not sticky
because I don't know how to do it
here is the code https://github.com/bockster6669/shivam-portfolio/
GitHub
GitHub - bockster6669/shivam-portfolio
Contribute to bockster6669/shivam-portfolio development by creating an account on GitHub.
Did I miss-understand what you needed to do?
In my codepen the nav retains the parent styles even when it gets the "fixed" class added to it by the intersection observer.
And which element out of this flexbox is supposed to be sticky
You can also put your react project in codepen , scrimba or bring your repo into codesandbox so ppl can help you
https://codesandbox.io/
CodeSandbox
CodeSandbox: Instant Cloud Development Environments
CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.
Also wouldn't be a bad idea to familiarize yourself with positioning
https://youtu.be/iGUSTyG-CYw?si=NunlUJlWznsLmGHm
https://youtu.be/fF_NVrd1s14?si=LkIdIKtLyvoIXy3H https://youtu.be/V-CBdlfCPic?si=MMc8SxiU6Yr-O6ls https://youtu.be/39rbYbVhb0Y?si=Rv9wnf4lkl7wM_8P https://youtu.be/8TyoihVGErI?si=eg7kfR9vSDnl4lWB
Kevin Powell
YouTube
Stop fixed navigations covering content on scroll
When we have a fixed navigation with anchor links that go to different locations within the page, that navigation can cover content when it scrolls to that location on the page. Luckily, it's easy to fix with some scroll-padding!
🔗 Links
✅ The CodePen: https://codepen.io/kevinpowell/pen/GRQyZMX
✅ More position sticky stuff: https://youtu.be/8T...
Kevin Powell
YouTube
CSS position deep dive
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=positioning 👈 Looking to up your CSS game? I have a bunch of courses, including several free ones.
With over 700 videos on YouTube that are almost all entirely about CSS, I’ve somehow never made one that looks at all the CSS position values! I’ve compared relative...
Kevin Powell
YouTube
Easily change sticky nav styling on scroll
When you have a sticky header or navigation, it’s very common to want to change the background of it, or add a shadow to it, so in this video I look at an easy way to do it with an intersection observer.
🔗 Links
✅ Ryan Mulligan’s article: https://ryanmulligan.dev/blog/sticky-header-scroll-shadow/
✅ More on intersection observers: https://youtu...
Kevin Powell
YouTube
When position sticky doesn't stick
Sometimes position sticky doesn't stick, so let's see why it doesn't and how we can fix it!
Kevin Powell
YouTube
A couple of cool things you can do with CSS position sticky
In this video, I take a look at using CSS position sticky in a couple of fun ways.
CSS-Tricks article: https://css-tricks.com/creating-sliding-effects-using-sticky-positioning/
My article looking at position fixed vs sticky: https://www.kevinpowell.co/article/positition-fixed-vs-sticky/
CodePens from this video:
https://codepen.io/kevinpowel...
"sticky" won't work here because the nav parent element is relatively short so it will soon scroll out of the viewport, taking the nav with it.
As I understand it, the solution is to use "fixed" but to only apply that positioning when the parent element scrolls out of view.
As I mentioned earlier, this could be done with the JS IntersectionObserver or with more modern animation-timeline properties with the caveat that these still don't work on all browsers.
I was thinking maybe have the nav as a direct child of the root so there's no limit to the height of the parent . But intersection observer is probably the better way to go. Could use something like a gsap scroll trigger to make the element fixed as it hits the top of the viewport.
Scroll-driven animations are gonna be amazing once they gain enough support
No sure what you mean by flex properties it needs to inherit from its parent though
Yea, maybe the only way is with js
thank you for the code snipe, it works, but needs a little shaping and I don't know exactly how, can you help me
so here is the function
this is how I am passing the elements -
the problerm is that, the nav becomes fixed when I scroll little after it, instead of little before it
this is what I mean
it should start to be fixed when I reach this point ( 10px before it )
adjust the threshold value. This can be from 0 to 1 using decimal values between
I tried but there is no result
any result
I mean, there is no result like 10px before it, I want to adjust it strictly
also can you tell me how this should work, because if I make it
1 for example and it starts glitchingit starts glitching and the obeserver function is called hudrend times
I suggest that you take a look at this:
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
And specifically this section:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#how_intersection_is_calculated
MDN Web Docs
IntersectionObserver - Web APIs | MDN
The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor element or viewport is referred to as the root.
MDN Web Docs
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.