This content originally appeared on Bram.us and was authored by Bramus!
Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that uses some background magic to create a CSS only implementation.
~
If you turn on an outline on one of the content sections it becomes more obvious:
- The content sections also appear underneath the navigation
- The content sections have background set, which has the exact same dimensions as their linked navigation item.
- The backgrounds are positioned visually underneath their linked navigation item using
background-position: fixed;
It’s a delicate combination, but I’m pretty excited that this actually works ?
Do note though:
- You’ll need to add an extra wrapper whose width is limited around the section’s content, to prevent the content from appearing underneath the navigation.
- Each navigation item gains their active state differently. Elements high up the navigation bar — such as Authentication — will become active pretty late, whereas items lower in the navigation bar — such as Expanders — will get their active state applied when the linked content section is only a little bit into view.
- You’re limited to background effects only.
This content originally appeared on Bram.us and was authored by Bramus!
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Bramus! | Sciencx (2021-05-10T22:30:18+00:00) Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds. Retrieved from https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/
" » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds." Bramus! | Sciencx - Monday May 10, 2021, https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/
HARVARDBramus! | Sciencx Monday May 10, 2021 » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds., viewed ,<https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/>
VANCOUVERBramus! | Sciencx - » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/
CHICAGO" » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/
IEEE" » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/. [Accessed: ]
rf:citation » Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds | Bramus! | Sciencx | https://www.scien.cx/2021/05/10/smooth-scrolling-sticky-scrollspy-navigation-with-css-fixed-backgrounds/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.