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
, absolute
and 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)