While learning CSS, you will discover lots and lots of properties that will help you style great websites.
A good example, often used in CSS, is position property. This can take 5 different values: static, relative, fixed, absoluteand sticky. Today, we’ll explore the creation of fixed and sticky elements and how they behave on the page.
Prerequisites
In order to understand better this tutorial, you should be able to define what CSS is and how you can add CSS to your HTML.
It’s also good to have basic experience of working with a source-code editor, like Visual Studio Code, but that’s only up to you.
Structure
Open your preferred editor and create an HTML file, like structure.html. Start by typing ! and then click the Enter button (if you’re in VSC), otherwise just copy-paste this in your file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed vs sticky</title>
</head>
<body>
<!--code will come here-->
</body>
</html>
After the title tag, link the CSS sheet to your HTML and create the style file, style.css.
<link rel="stylesheet" href="style.css">
Next, we’re going to create two div elements. Within the first one, we’ll define the fixed element and within the second one, the sticky element.
<div class="example">
<div>
<div class="example">
<div>
Having the basic structure of the page, let’s also add the basic styling needed in CSS before going to the next step.
body {
/*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
display: flex;
/*feel free to set any other color of your choice*/
background-color: grey;
}
.example {
width: 100%;
}
Fixed Element
In the first div created above, we’re going to add the structure to be designed with the fixed element.
<div class="example">
<div class="box fixed">This is fixed</div>
<div class="content one"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
Switching to the CSS sheet, add the following code:
.content {
background-color: blueviolet;
height: 200px;
margin: 1rem;
}
.content-one {
height: 100px;
}
.box {
width: 300px;
height: 100px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.fixed {
position: fixed;
top: 24px;
left: 24px;
}
Don’t worry - you won’t have so much to add for the sticky element too. The above-designed classes (except the last one) will define the next part of the project as well.
Sticky Element
For the second div, let’s define the code in our HTML file as follows:
<div class="example">
<div class="content one"></div>
<div class="content"></div>
<!--placing the sticky box as third to better visualize the difference between the 2-->
<div class="box sticky">This is sticky</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
Almost there!
Remember the whole CSS styling from the fixed element? If you take a look at that, you’ll notice that the common classes for the elements have been already defined.
All there’s left is to add the specific styling for .sticky.
.sticky {
position: sticky;
margin: 24px;
top: 24px;
}
Final Code
Aaaaaaand scene! Let’s see what we have created.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed vs sticky</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--structure of fixed-->
<div class="example">
<div class="box fixed">This is fixed</div>
<div class="content one"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<!--structure of sticky-->
<div class="example">
<div class="content one"></div>
<div class="content"></div>
<!--placing the sticky box as third to visualize the difference between these two-->
<div class="box sticky">This is sticky</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
</html>
body {
display: flex; /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
background-color: grey; /*feel free to set any other color of your choice*/
}
.example {
width: 100%;
}
.content { /*these are properties for all the elements that have the class content*/
background-color: blueviolet;
height: 200px;
margin: 1rem;
}
.content-one {
height: 100px;
}
.box {
width: 300px;
height: 100px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.fixed {
position: fixed;
top: 24px;
left: 24px;
}
.sticky {
position: sticky;
margin: 24px;
top: 24px;
}
You have now a better understanding of how you can use the fixed and sticky elements in CSS. Play around with them to create a fixed menu or a sticky footer - the possibilities are endless.
Have fun! 🎉
👋🏼 You can check this tutorial and other projects here.
Cover photo by Jackson Sophat on Unsplash
Top comments (0)