Use Sticky Positioning for Section Headers

Instructor: [00:01] Let's start by setting up a description list element. Inside the description list, we're going to have sections comprising a section header and content underneath. The section header is going to be a DT tag or description term. The content will comprise description details tags or DD.

[00:23] In this example, we're going to use results of soccer matches for our data. The title of our first section header is going to be premier league, and within each DD is going to be a soccer result. For example, Brighton and Hove Albion two, AFC Arbor with two. Let's pad this out with some more results and let's save and visit our page on iPhone 5s Safari 11.

[00:54] Here's our description list with a description term and description details here. Let's add some more sections to our code. Now, we have a section for championship results and league one results. Save and refresh. Here's our description list with more data inside of it.

[01:17] Let's change the appearance of our description list a little by heading to our CSS. Targeting the description list element, we'll give it font size 30 pixels. We'll give every description term element a background color. We'll give some padding to each description details element. Let's see how that looks.

[01:43] Now, everything is a bit bigger and spaced out. Currently, we can only see our description term element when we get to the section that we're looking at, but a common situation would be that we want this description term, or this header, to be fixed at the top of the page during the time that we're scrolling that section. This could be especially useful when there is a lot of data and it may be easy to forget which section we're actually looking at.

[02:12] There's an easy way to implement this. Let's head back to our description term in our CSS. We're going to add position sticky, and we'll need position webkit sticky to target webkit browsers. We're also going to use top zero. Let's save and refresh and see how that changes our page.

[02:36] Now when we scroll down the page or up the page, the description term-the header-stays fixed at the top of the page. As we scroll down and we get to the next section, it takes over like this. This is particularly useful for small viewports because if there's a lot of data, or data taking up a lot of room, our users will still be able to get the context of what section they're looking at.

[03:08] Before jumping in and using position sticky, it's definitely worth checking first that it's supported on the devices or operating systems that you need to support.