Hello everyone, today I propose you a tutorial to realize a sticky <aside> only in CSS, that is to say without javascript or other framework. Aside tags allow you to present something next to another element such as an article. In our example, the aside will present the author of the article. To do this, we will use a property that is not widely used, and underestimated in CSS3: the position: sticky;. You're ready to go !
Let's code
To begin, we will set up our HTML. In our example, I decided to add a header to show the flexibility of the technique. The page content is between the <main> tags, the article is between the <article> tags, finally the aside is between the <aside> tags. You see, HTML, contains a very wide variety of useful tags, which are often replaced by <div> with different classes.
So our HTML base looks like this :
<header>
<span>LOGO</span>
</header>
<main>
<article>
<!-- Content of the article-->
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat, mi non ultricies interdum, erat neque pharetra nisi, a tempus nunc risus quis ex. In hac habitasse platea dictumst. Cras nisl ligula, malesuada sed facilisis eu, tincidunt in libero. Integer tempor malesuada justo, non fermentum ante vehicula sed. Nunc sagittis porttitor nunc. Etiam dictum consectetur facilisis. Maecenas ex nisl, ullamcorper rutrum mattis vitae, aliquet id erat. Cras pretium mi vel ultrices sollicitudin. Phasellus quis ipsum a felis accumsan rhoncus quis vel mi. In a enim ligula. Fusce ut mauris rutrum, ultrices massa et, ullamcorper nibh. Quisque aliquam eleifend ultricies. Praesent eu tempor enim. Nunc vel augue laoreet, rutrum quam sit amet, malesuada massa.</p>
</article>
<aside>
<!-- Content of the aside -->
</aside>
</main>
Now that you have your HTML base, you still have to apply some style to it :
header {
font-size: 25px;
font-weight: 800;
font-family: sans-serif;
position: fixed;
top: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: saturate(200%) blur(20px);
max-height: 20px;
z-index: 2;
padding: 0 9px 15px 9px;
}
main {
zoom: 1;
width: 100%;
max-width: 1400px;
margin: 60px auto 200px auto;
}
main h1 {
text-align: center;
}
main p {
text-align: justify;
}
main:after {
clear: both;
}
main:before, main:after {
content: " ";
display: table;
}
article {
padding: 0 15px;
width: 900px;
max-width: 60%;
background: transparent !important;
margin: 0 15px 0 0;
}
article h1 {
margin-top: 0;
}
aside {
top: 45px;
background: rgba(0, 0, 0, 0.07);
padding: 30px 10px;
max-width: 20%;
overflow: auto;
z-index: 1;
}
aside h3 {
margin: 0;
}
aside svg {
width: 100px;
max-width: 100%;
display: block;
margin: 0 auto;
}
aside .infos-auteur h2 {
font-size: 20px;
text-align: center;
}
aside .infos-auteur span {
display: block;
padding: 0 2px 5px 2px;
}
article,
aside {
float: left;
}
However, if you test this code, you will see that the aside is not fixed. Indeed, by default the position value is relative. To see a sticky aside, you need to use the position: sticky; property. So in our CSS, we need to add some code to our aside :
aside {
position: -webkit-sticky;
position: sticky;
}
As you have seen, you have to use the position: -webkit-sticky; and position: sticky; because some browsers don't fully support this method yet. But with the -webkit, it should be fine!
You can see the final result here :
I hope this tutorial helped you create your sticky aside on your webpage, feel free to give me feedback in the comments! 👍
Top comments (0)