Это видео недоступно.
Сожалеем об этом.
Stop fixed navigations covering content on scroll
HTML-код
- Опубликовано: 12 авг 2024
- 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: codepen.io/kevinpowell/pen/GR...
✅ More position sticky stuff: • A couple of cool thing...
⌚ Timestamps
00:00 - Introduction
00:51 - Making things smooth scroll
01:40 - Adding scroll-padding
02:33 - Improving it without magic numbers
06:43 - The one downside
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
--
This video has been dubbed into Spanish (United States) using an artificial voice via aloud.area120.google.com to increase accessibility. You can change the audio track language in the Settings menu. #DubbedWithAloud
I got early-access to a new thing YT is trialing for multi-lingual videos! If you speak Spanish, you can click the settings cog and there is an "audio track" option, with a Spanish audio track. Would love feedback on the quality of it!
Jajaja cool, that is amazing.
How have you made it? Just recorded video in one language and then add audio for another one? Or you can have different videos inside of one?
I'm interested in making RU/EN videos :)
RUclips app added everything in Spanish from the title to the voice I was very surprised to hear it, it seems native Spanish
@@QwDragon I'm not entirely sure how it works tbh 😅 - I got invited to trial a new service called Aloud. In the end, they provide you with a single video that has multiple audio tracks to upload to RUclips. I don't know how it encodes the tracks to know the different languages for YT though... aloud.area120.google.com/
@@KevinPowell thanks, that's what I wanted to know - single video track and multiple audio. Very cool feature, but I expect comments in mixed languages to be a bit messy)
Others have said it before... now it's my turn... You're a mind reader! Have this exact issue that I've been trying to deal with the last couple of days! Been using a padding/negative padding hack, but it's "magic numbers" and a complete pain in the backside that way! This looks perfect and simple! Thank you!
I can't believe I wasted ~2hours on it, and actually, it's so easy. You're a life saver Kevin, thank you!
This is the exact problem I was having just yesterday and have managed to stumble upon this video a day later.
Thank you very much Kevin, much appreciated for the consistent, helpful content!
You're an absolute beast. I've seen a few of your videos now and your knowledge of CSS has been helpful to me putting together this frontend. You've earned a sub.
I suppose it may be worth noting that aside from devs, users who are more likely to actually "resize" the window are those on mobile devices switching between portrait and landscape orientation. So if that causes a change to the layout, a ResizeObserver might be more relevant.
You do good work. Straightforward and to the point. All practical stuff.
Hey kevin you literally are a lifesaver!! Was just searching for this for almost an hour! Thanks a lot!
Thanks Kevin. I was doing a next js react project where I was facing this issue. I tried to think hard and couldn't come up with the solution. This 2 lines of code saved my day . Cheers🥳
Exactly what I was looking for 9days ago.
Thank you 😊
You are amazing Kevin! Thank you for all of the helpful tips and tricks. :)
Damn it scares the sht outta me when the video start and there was a voice over speaking spanish xD
At first I tought that someone was reuploading your videos with spanish audio.
My native language is spanish, but I still prefer to watch videos on english, specially when they have clear pronounciation like you
Thank you! Thank you! I was literally looking for a solution to this! So helpful!
The Spanish version sounds amazing! I will personally continue watching your videos in English because I understand both languages and I prefer your human voice over a robot, but I still think it’s pretty impressive that you can have multiple languages in a video like that.
I hear the spanish version too, but I'm learning english and I prefer to learn
Q loco no?
How do you set a different language output? I only see captions but the voice is still English
@@blackpurple9163 there’s a video settings button where you can change playback speed, cc, etc
The option is called audio track. What device are you using to watch the video?
@@juanecheverry9055 my smartphone, no RUclips app I've tried had this option
offsetHeight returns an integer value. Using document.querySelector('.primary-navigation').getBoundingClientRect().height will return a float value which will give you the precise height so you dont have to use the hacky -1 solution.
Kevin, been learning so much from your videos. Thank you for the content.
I have been fixing this problem on my code for like 3 weeks, and i just found the answer here. thanks, bro
Thank you for always helping me solve my css issues!😅
WHAT THE!!! I was just searching for this, and here you upload the video about it.
I had no idea you could dynamically change css variables with javascript!!! That's so awesome! If only I knew this sooner xD
Thanks, i had my scroll-padding-top on the element i was scrolling to rather than the root, saved me lots of time
Perfect! Thank you! I've been racking my brains for 2 days trying to solve this issue!
Great video! I always used to do a margin-top for each section but this seems much better. Just out of curiosity, doesn't this affect any other scrolling element on the page? I can't think of anything at the moment but would like to keep in mind if this 'breaks' anything.
Literally perfect timing. Great vid
Literally a life saver. Thanks alot Kevin
THANK YOU , every time a get a problem in this website am working on, i find that you have done a video about it. last time it was the hover in a mobile and this time the nav covering the content.
OMG! I just learnt something new which I'm going to apply on my portfolio website.
Thank you for this useful tips.
Awesome video!! Thanks for using a smidgen of JS! :)
This way worked! I'm coming here for more CSS tricks.
Very interesting ! I used to to make it with scrollIntoView function in js, that helps to scroll at the center on the element. I even tried to create an absolute element and gave him the #id and put him like 50px on top of the article... that's a bit a diy thing 🤣 haha thank you I didn't know the property scroll-padding-top ! I will try this next project !
That is actually is going to help me, thank you
Another approach is to have a css variable that would control both the header’s height + the padding offset.
Then, you wouldn’t need JavaScript or worry about window resizing
that would work? :o
can you please explain further?
@@sktnml doesn't really need more explanation, lol
@@sktnml
:root {
--navHeigth: 200px;
}
.nuv{
height: var(--navHeigth);
}
html{
scroll-padding-top: var(--navHeigth);
}
in the root selector you can create css variable
the name of the variable start with two hyphen
I think the reason Kevin didn't do it,
It's because you don't always want to set your navigation height,
Sometimes the height comes from the font size, and the padding and so on.
In cases like this, you want to use js to get the final height and do the calculation by that
@@oriel-elkabets Ty for this friend
thanks kevin, much needed video
This used to bother me as well - great video, thank you Kevin.
OMG I always face a problem like this, ALWAYS. So, usually when this happens, I would just simply set the #section_id to one div above its actual position, so when it scrolls, it would show the whole h2.section-title, but still, it does not feel right every time I do it.
Sir, once again, thank you sooo much for helping me understand web programing interface, css, js, etc. Keep making videos, keep inspiring! God bless you, sir.
Awesome video!! Thank you kevin!
Thanks, my friend linked me your video and I fixed my problem :)
Omg! This has bothered me forever cause I always need to hack a solution and am glad to find a css solution ❤️
This video saved my day. Thanks @kevin
I experienced the same thing with my portfolio. Thanks soo much for this
One of the other code tutorial guys uses a trick so the viewer doesn't have to watch and hear typing (and inevitable retyping).. I think he types in all his code and proofreads it, then deletes the bottom line, then the second to bottom line etc.. while shooting the actual video he re-does the lines one by one.. it's slick!
I always make my navigation bars at a fixed height, this fixes common annoying css layout shifts and inconsistent re-sizing. By default the anchor placement is on the top left edge of the anchor tag, the way I get around this anchor behaviour is by adding a padding-top to the actual anchor element equal to the navigation bar height. This way I don't need to change scroll offset. If you expect the navigation bar height to change that's when you turn to JavaScript for help.
You could also use Math.ceil() to round up in your JS constant and remove the + 1 or + 5 for the pixel value:
const navigationHeight = Math.ceil(document.querySelector('.primary-navigation').offsetHeight);
You mean Math.floor()
@@prokopistsesmetzis7974 Oh, I forgot he changed it to -1 - then yes, Math.floor
@@JimKernix The real issue is that the "offsetHeight" property always returns an integer, so it's only moderately representative of the element's _actual_ height.
that just returns offset height itself.
ceil and floor of an integer is the integer itself.
@@dsdsspp7130 What's your point? He notated that it was slightly below the actual number so using ceil will "rounds a number up to the next largest integer", floor "returns the largest integer less than or equal to a given number". So by using either of those removes the need to use +1 or -1 to get to the desired number. I'm not familiar with offsetHeight, I was making a suggestion as to an alternate method to arrive at the number he wanted.
I used to got the same problem, I fixed that by adding this css code: margin-top: -100px;padding-top: 100px;
EXPLAIN: margin-top with negative value will destroy the space that padding-top makes. So it works.
Great trick , I love it . Thanks
Haha, wish i saw... wait this video came out now. I was tearing my hair away when trying to find a fix for it.. Thank you
A better way to do this without JavaScript:
1. Set up a CSS var for the height of the top navigation, as the height of the element rarely change.
2. Use that variable not just for setting top navigation height, but also for setting scroll padding top. Either directly the number, or using the var as part of a calc() function and adding a few extra pixels on top of the navigation height.
Love you Kevin!
Looks promising for my novel theme project.
I'm struggle with JS, this help me understand JS little bit.
You are CSS hero ❤
Didn't know about scroll-padding. I usually have specific anchors for navigation (a.nav) and then I move them with CSS: a.nav { position: relative; top: 100px }. I will probably start using your solution instead in the future.
You know whats crazy, i was just experiencing this, i thought to use JS and your video pops up.... live saver
Css is so important ... Great Kevin 👏🏻
I just opened this video to drop a like because the title was all I needed to agree with
Hi. I solved this problem, configuring a padding-top for the #. It was all due to an oversight, because I thought I was padding-topping my . I'm taking my first html and css lessons. I think that at first it happens to all of us that we do things without knowing.
Great tip! Thanx!
Kevin en Español, gracias.
Me has ayudado tanto, y ahora en mi idioma!
Ahhhh I can't believe this! tysm!!
This is really awesome
Thanks Kevin🎉
Nice tips !
i love it , thank you the king 🕺🏿.
Thanks for this cool tip.
Bummer - was hoping to see the window resize/observer fix covered in this video. Maybe in a ‘part two’? Pleaseeeeee :)
many thank, you are amazing
i love your videos!
Thank you!
I just realized he says "Hello my frontend friends" in his intros, not "friend and friends" lol
Thank you very much sir
Right now I have to fix a problem like this in my work. thanks!!! jajaa
thank you kevin
Thank you so much
youre savior thank you so much 😄
I did not know "scroll-padding" yet - thank you
I wish I could like this video twice... thank you!
I have never used observers, when you were talking about workarounds for resizing i thought you were going to mention event listeners. Is the observer a more convenient option? Or are there more advantages to observer approach?
tbh, you could probably just use window.resize. from what I understand (and my JS knoweldge is a bit limited, so take it with a grain of salt), but resize observer tends to be more performant than using an eventListener for resize, but that's more for elements, which can have trickle down effects (and potentially even lead to infinite loops). On the window, I'm not sure if there is a benefit.
awesome! I do have a question though, is there a way with only CSS and no Js?
I've fixed that issue by setting the height of my navbar in a CSS variable (with rem units so that it's responsive). No JS, and no need for any adjustment at all.
I’ve done the same. It works quite well.
This works only for a specific height navigation bar. So it is responsive on a static height element. Except, if you find all the braking points and use media query in CSS( that have problem in multi language sites).
This is the first solution that I thought of too. I would solve the problem in CSS using custom properties, and not bother with this JavaScript approach.
Thank you.
Thank You.
What a legend
Great tutorial. 1 question; I've used a shrinking Navbar where after scrolling 80 px down the Navbar shrinks. The offset remains the initial height on page load. Is it possible to get the actual height? Or should I just subtract the difference from the JS var?
I had to create the entire functionality in JS, then I learned about scroll-padding-top. It was a frustrating situation xD
Awesome!!!!
Esta nueva función de audio traducido al español es genial para todos los latinos que aprendemos a programar gracias a este canal!!
Vos escuchas como un chirrido de fondo? Es re incomodo
Amazing 🤩
You can alse use a ::before pseudo-elemento with blank content and negative margin-top.
Thenks, I didn't know you could change css variables in Javascript
I have a similar problem, except the fixed nav pops up at the bottom (I have to use absolute in this case), it always blocks the last bit of the content when it does so I added conditional extra padding-bottom to the content when the nav pops up.
Now the problem is the content is extended by that extra padding therefore pushing the nav further down so after it pops up I have to scroll down again to see it, so is there any CSS or JS code to make the content scroll down to the very bottom?
Also love your videos 😊
Actually the was a way of making similar thing with paddings and margins, but a spicial property is much simplier!
Thankyou... save my life ...
Javascript functions: the bane of my existence. I haven't managed to get into Three.js or similar because even if I know Javascript well-ish, I don't get all the calculations!
Hi Kevin, any updates on your new course "Beyond CSS"?
is there a way to do different padding for different elements?
Thanks for the video. Unfortunately, the link you provided to the code doesn't exist anymore
how about I just define my navbar height in a variable (let's stay --navbar-height) and have that same variable in my scroll-padding-top ?
what if i don't want to add a scroll padding to the whole document? Just one section
My problem it doesn’t even nav to it or it does but it’s like 50 pixels away from the top
I thought this was going to be a video about those large af navbars in websites nowadays that take nearly half the screen and barely leaving anything for the scrollable content 😂
I use vanilla JS to solve this problem simply by executing a piece of code that calculates the height of the header (ScrollTop).