sorry for the weird title, but I am trying to figure out how I can make it that the grey bar follows the viewport at the top? is that possible with figma?
or do I need to code that in?
#Position of element
spare lava
tawdry marsh
Hey @spare lava ! You want it to always stay on top there?
You should try using "sticky" positioning in the prototype tab
spare lava
You should try using "sticky" positioning in the prototype tab
I want it to follow to viewport down, when the user scrolls down you should still see that element, its an extra nav so users can always go to a page whenever they want
tawdry marsh
yeah i meant if you want it to always stay at that part even when scrolling (so never disappear)
wouldn't sticky create this effect?
i might be confused
@spare lava
spare lava
wouldn't sticky create this effect?
when I try sticky it stays on the same position, I am unsure how to explain this better 😅
spare lava
ye, the top from the viewport
tawdry marsh
like 0 0?
spare lava
euh a little confused by that but I can test it out if you explain what I need to do
tawdry marsh
i meant like at 0 0 coordinate?
tawdry marsh
when you say "top from the viewpoint"
spare lava
it's a typo xd
tawdry marsh
i mean i think i understand what you mean by top from the viewpoint
im just trying to clarify if you want it to be exactly onn top top at 0 0 coordinate
spare lava
viewport is what the user can see
tawdry marsh
yeah thats what i thought
and thats what im also talking about
im just trying to clarify if you want it to always be in the 0 0 coordinate of the viewpoint
spare lava
I want it like about this high
tawdry marsh
or if you want it to have that space on the top a bit
okay, you want it that high no matter what the viewpoint is, is that correct?
spare lava
yes
spare lava
it's already on fixed positioning, I want it to go down while the user is scrolling down
tawdry marsh
with fixed positioning it should. Could you send a screenshot of your layer setup?
the fixed navbar needs to be in the layer that can scroll
spare lava
tawdry marsh
it's already on fixed positioning, I want it to go down while the user is scroll...
isnt this what you want?
your navigation is not fixed positioned
spare lava
yes
tawdry marsh
it is absolute positioned
thats okay, but it also needs to be fixed
from the prototype tab (where the sticky is available)
spare lava
it says the contents needs to be bigger on the frame it's currently before scrolling can work
in the overflow section
tawdry marsh
yeah so you likely want to put vertical scrolling on "Desktop-1"
and then you want to bring the Nav to be on the same level as "Page"
and you want to make sure that desktop-1 is smaller than page (so the page is overflowing desktop-1)
tawdry marsh
the fixed navbar needs to be in the layer that can scroll
thats what i meant here that the navbar needs to be in the layer that can scroll
a layer can only scroll if something is overflowing it
spare lava
I have now this
tawdry marsh
Is your page bigger than the desktop-1 as mentioned above?
spare lava
I assume it is now
tawdry marsh
the overflow is not on nav
but on desktop
the desktop is what you can scroll
not the nav
- for nav you want it to be fixed, not sticky
spare lava
I have it now tho it's a bit to low
tawdry marsh
I mean its just wherever you position it
spare lava
I have this now, it should only move with the viewport if at a certain height
tawdry marsh
okay that wasnt really specified, but in that case you cant really do that. The best you could do is "sticky" but then it wont have the extra space on the top
what you can try to do is to put it in another frame where you do have that extra space on the top
and then put sticky on that
that should give it the illusion
sticky basically starts the "fixed" position, once the top of the element reaches the top (y=0) viewpoint
spare lava
okay that wasnt really specified, but in that case you cant really do that. The ...
I have specified with "on top of the viewport" but that wasn't a good explanation my appologies.
spare lava
what you can try to do is to put it in another frame where you do have that extr...
I'il leave it at this for now
thx
spare lava
another fixed frame? could you show me?
tawdry marsh
no, it is just one frame that is sticky
you wont need fixed on the nav anymore, but you need to put the nav into another frame that has the extra space on top
if you would put sticky on the navigation directly, you wouldn't get the extra space on top
spare lava
it's not really working for me 😅
tawdry marsh
Could you show / describe what you did?
tawdry marsh
Your navigation bar is not in the frame
and the frame needs sticky
navbar doesnt need fixed
spare lava
tyvm, I have put in the frame now and it's working like I want it
tawdry marsh
basically you are making a new navigation bar, where you have the original navigation bar in a frame w extra space
so you can have that extra space
if you didnt have the extra frame, the navigation would stick exactly on the top (with no extra space)
spare lava
thx for the help, not sure if I will be able to reproduce it but that's a later concern.
tawdry marsh
just try to understand what sticky means and how scrolling works and you should be able to
thats why i tried to explain how it works here so you could make it based on understanding the concept instead of following steps
but good luck on it and feel free to ask again if it wont workout next time!