Stop fixed navigations covering content on scroll
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/GR…
✅ More position sticky stuff: • A couple of cool things you can do wi…
⌚ 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
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t…
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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 https://aloud.area120.google.com to increase accessibility. You can change the audio track language in the Settings menu. #DubbedWithAloud
Content
0 -> have you ever had anchor links on your
1.52 -> page but when you click on them to go to
3.12 -> the different sections it has the
4.48 -> problem or if i go to section two it
6.319 -> actually covers that heading up like
7.919 -> that or if i go to section three it
9.76 -> covers that up but that really does suck
11.44 -> but luckily there's actually a way to
13.28 -> solve this with just one line of css
18.72 -> hello my friend and friends thank you so
20.8 -> much for coming to join me for yet
22.24 -> another video and if you're new here my
23.92 -> name is kevin and here at my channel i
25.519 -> hope you fall madly deeply in love with
27.119 -> css and if i can't get you to fall in
28.72 -> love with it i'm hoping to at least help
30.4 -> you be a little bit less frustrated by
32.079 -> it and today we're doing it by solving
33.92 -> this problem that we can run into with
36.399 -> anchor links and when things overlap and
38.559 -> we don't want to do that with javascript
40.079 -> if we can avoid it so let's jump right
42.16 -> into the code and take a look at this
44.239 -> and so i've set up this simple thing
45.52 -> with a little sticky navigation here at
47.44 -> the top and as you can see it covers up
49.52 -> my content when i click on the sections
51.44 -> and let's let's before we jump into that
53.52 -> let's just improve this a little bit so
55.44 -> in my css here
57.6 -> what i am going to add all the way at
59.359 -> the top
60.48 -> is on my html let's do a
64.4 -> scroll behavior of smooth
67.2 -> and at least now when i click
68.88 -> it's a smooth transition between the
70.479 -> different ones but again the issue is if
72.72 -> i go to section two i lose the title the
75.119 -> reason this is happening is when we go
76.72 -> to section one it's lining up the top of
79.68 -> this section to the top of the page and
81.439 -> that's going under this and i
82.799 -> exaggerated the the height of my
84.32 -> navigation here just to really highlight
86.24 -> what's happening
87.68 -> so first we're going to solve this sort
89.119 -> of the cssc way only and then we're
91.52 -> going to add a touch of javascript and a
93.36 -> little bit of custom property magic just
95.759 -> to make this a little bit more we so we
97.759 -> don't need magic numbers and things just
99.52 -> work and the way we're going to do this
101.84 -> is here on the html and i'm going to
103.84 -> come in and do scroll padding
106.24 -> we're going to do scroll padding top and
108.399 -> let's do i'm going to do a lot for now
110.32 -> let's do like
111.759 -> 300 300 pixels so now if i click on the
114.399 -> section two you can see it didn't
115.68 -> actually go to section two the section
117.439 -> two is over here because it's scrolling
119.759 -> to section two but it's leaving 300
122 -> pixel space here from the top of the
123.92 -> page down to where the start of section
126.32 -> two is if i go to section three same
128.479 -> thing section four well that's at the
130 -> bottom so it doesn't really count um so
132.319 -> let's reduce this number to maybe 100
134.319 -> pixels because that might be a little
135.52 -> bit better and so now we can try again
137.76 -> section two oh that seems to line up
139.92 -> much nicer that's sort of what i wanted
141.599 -> look at that
143.04 -> but it's probably not perfectly lined up
145.2 -> see how some of the padding is still
146.56 -> underneath that when i go to the section
148.879 -> and this is where having to put magic
150.879 -> numbers in here is not ideal so what we
153.76 -> can do instead of a magic number is uh
156.08 -> we can come in with a variable so var
158.4 -> and what we'll do is we'll just call it
159.68 -> scroll padding
161.76 -> and we could just leave it like this but
163.92 -> one nice thing is we could put in a
165.28 -> fallback and i'm going to do 50 100
167.28 -> would be better because we saw 100
168.959 -> actually works pretty well here but if i
171.28 -> do scroll padding of with the 50 there
173.44 -> what it means is this is a custom
175.76 -> property that's non-existent it doesn't
177.599 -> we haven't defined it anywhere so
179.44 -> because the browser can't find this it's
181.36 -> going to go to this fallback
183.68 -> so if i go to section two it goes to
185.44 -> section two and you can see it's not
186.64 -> perfect but at least it's not like
188.64 -> covering up everything and hiding that
190.239 -> text there and again i would i would use
192.879 -> uh probably a better number than 50 here
195.04 -> as the fallback but at least there's
196.64 -> something
197.599 -> and that just makes it a nice
198.959 -> progressive enhancement which just means
200.72 -> like if the javascript there's an issue
202.48 -> with it someone has javascript disabled
204.4 -> whatever it is it will use this value
206.48 -> here but if the person does have
208.239 -> javascript enabled which is most people
210 -> we can enhance we can make this a little
212 -> bit better of an experience for them so
213.92 -> let's do a const of
216 -> navigation
217.44 -> height
218.239 -> and that's going to be equal to my
219.76 -> document dot query
222.56 -> selector
223.76 -> and i want to select my navigation and
226 -> in this case i don't have an id on it
227.68 -> that's fine we can just choose this
229.12 -> primary navigation right here
231.599 -> so let's make this a lot bigger for a
233.36 -> second and so here will be my
235.68 -> primary navigation
238.239 -> and i want the navigation height so i
240.319 -> need to know how tall this navigation
242.08 -> actually is and offset
244.4 -> height
245.92 -> and that should give us the offset
247.599 -> height let's let's console log that
249.12 -> console log
251.04 -> uh nav
252.319 -> navigation
254.08 -> navigation
255.76 -> there it is navigation height uh i am in
258.079 -> codepen here so if i look in my console
260.239 -> we should get it there it is 162 pixels
262.8 -> tall
263.84 -> so we can actually use this now to
266.08 -> update or apply this to our html now
269.68 -> then the ht and we want to get the html
272.16 -> itself because that's where this is
273.44 -> being applied and it's the root of our
274.96 -> document and all of that
276.96 -> so to be able to get that we can
278.16 -> actually just get if we go here and do
280.08 -> document
282.68 -> document.documentelement and that should
285.199 -> update here and we can see here that we
288.16 -> you know it's logging out everything
289.919 -> that's there
291.28 -> so this is what we want to actually be
293.52 -> applying this to
294.96 -> so we don't really need the console log
296.88 -> i guess so what we can do is we can come
299.12 -> here and we can say that document dot
301.6 -> document
302.8 -> element
305.36 -> element and then we can just do style
307.68 -> and then do a set property and set
310.16 -> property allows us to set custom
311.68 -> properties so first we want to put the
313.199 -> name of the custom property here and so
315.039 -> we do that it has to be in quotations
316.72 -> and we write scroll padding because
318.88 -> that's what i'm setting and then here i
320.56 -> want to set the value that we're going
322.08 -> to be putting so i could just put a
323.68 -> number here if i wanted to but we want
325.36 -> this navigation height so i can grab
327.44 -> that drop that right in there that error
330.32 -> should go away let's get rid of that
332.4 -> console that's right here and if we
334.24 -> click here it should work except it's
336.4 -> not working we obviously made a mistake
338.4 -> along the way let's go take a look
340.639 -> so it is working you can see i have a
342.32 -> scroll padding but it's 162. uh that
344.8 -> doesn't tell it anything so if we come
346.88 -> here i just need to do plus px
349.759 -> so to say you know we have to give a
351.68 -> unit to the number that we've just put
353.36 -> in there so now with that change done if
355.44 -> we click it should there we go line up
357.44 -> pretty much perfectly
359.36 -> uh you'll notice there when i do go to
360.96 -> the section 2 it's actually off by a
362.72 -> smidgen i have a feeling that's because
365.44 -> if we look in here the primary
367.039 -> navigation is actually
369.24 -> 161.59 pixels
371.28 -> uh so i guess if you want to be safe we
373.199 -> could actually come here and
375.28 -> when we do this we could always do a
377.68 -> plus one
379.36 -> plus pixel
380.72 -> so that way we're just adding that
382.24 -> little extra little bit so we just
383.84 -> ensure that we don't run into that
385.28 -> problem
386.4 -> and now when we do this it should work
389.68 -> perfectly fine or when i go to my
391.28 -> different sections oh i did a plus pixel
393.28 -> it should have been a minus pixel by the
394.96 -> looks of it minus one uh instead of plus
397.44 -> one
399.12 -> and now there we go it's working
401.039 -> perfectly and going exactly where we
402.88 -> want it to there's one downside of this
404.72 -> is if you resize things and it causes
406.639 -> the navigation to change size that
408.24 -> number won't automatically be
409.52 -> recalculated there are ways of setting
411.52 -> that up but honestly the only people who
413.199 -> ever do this are devs anyway and usually
415.52 -> navigations don't look like this anyway
417.44 -> but if that is something important you
418.72 -> could set a resize observer that would
420.56 -> handle that and update any values that
422.4 -> you would need updated and if you
423.84 -> enjoyed this and you'd like to explore
425.36 -> more things and cool things that you can
426.88 -> do with position sticky i have a video
429.12 -> that you might enjoy right here and with
431.12 -> that i want to say a really big thank
432.72 -> you to my supporters of awesome over on
434.4 -> patreon jan johnny stewart tim and simon
436.96 -> as well as all my other patrons for
438.319 -> their monthly support and of course
439.759 -> until next time don't forget to make
441.039 -> your core on the internet just a little
442.479 -> bit more awesome
Source: https://www.youtube.com/watch?v=iGUSTyG-CYw