Issue
I have this html code where it has a main content on the left and a side bar on the right. My goal is to have the last sidebar (the one with the "faq" class) stick to it's position whenever I scrolled down in the main content and when I scroll back up, it should return all the div class(about,contact,faq)to its position. I've tried using the 'position: sticky;' on the "faq" class but the problem is that it doesn't stick. What should I do?
This is the HTML&CSS code:
* {
box-sizing: border-box;
}
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
padding-left: 90px;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
height: 100%;
padding-left: 20px;
padding-right: 90px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
/* this is for the side bar, this is where I should implement the sticky feature*/
.about {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.contact {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.faq {
background-color: white;
padding: 20px;
margin-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Eat Blog-a</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h5>Posted by (Username)</h5>
<h2>Description</h2>
<p>Content</p>
<div class="fakeimg" style="height: 200px">Image</div>
</div>
<div class="card">
<h5>Posted by (Username)</h5>
<h2>Description</h2>
<p>Content</p>
<div class="fakeimg" style="height: 200px">Image</div>
</div>
</div>
<div class="rightcolumn">
<div class="about">
<p>This is where we will put the about area</p>
</div>
<div class="contact">
<p>This is where we will put the about contact</p>
</div>
<div class="faq">
<p>This is where we will put the about FAQ</p>
</div>
</div>
</body>
</html>Solution
Sticky only works when the parent element has height greater than total height of children, so I used position: absolute; height: 100% to set height for the parent element.
.row{
position: relative;
}
.rightcolumn {
float: left;
width: 25%;
height: 100%;
padding-left: 20px;
padding-right: 90px;
position: absolute;
right: 0;
}
.faq{
...
position: sticky;
top: 0;
}
Answered By - Anh Le Hoang Answer Checked By - Marie Seifert (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.