From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Adding fixed and sticky elements

Adding fixed and sticky elements - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Adding fixed and sticky elements

“

- [Instructor] Fixing or sticking elements to specific areas of the screen is a common web design pattern that we've seen for quite a while. But in the past, getting this behavior required using JavaScript along with some complex calculations like how tall and wide is the viewport, where is the current scroll position in the viewport, et cetera. We had to do that to figure out when and where the element should stick or stay fixed on the screen. Now with modern CSS, we have a much simpler solution. The position property supports both fixed and sticky values, allowing us to handle these behaviors directly in CSS. No JavaScript needed. Let's take a look at how each one works and how you can use them in your projects. So the fixed value is what you would typically use when you want an element like a menu or a footer to always stay visible, anchored to a specific part of the viewport no matter how much the user scrolls. So as an example, here I've created a simple footer, and I want it to…

Contents