I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly.
To identify colors in the following text, refer to the script below.
When scrolling, the black area remains fixed while the green area sticks to its position relative to the red top bar. However, the content within the green area exceeds the viewport's height.
Once the scroll nears the bottom of the page and the overflown green area matches the remaining scroll height, the green area begins to move.
I am looking to have the green area scroll along with the black area and stay fixed when it reaches the end. Essentially, I want it to behave like Facebook's sidebar or similar to this example:
Is achieving this behavior possible with position:sticky, possibly by integrating some JavaScript and jQuery?
I prefer not to resort to the old method of using position:fixed like certain other libraries do when we have the convenience of position:sticky.
* {
font-family: "Courier New", Courier, monospace;
color: #fff;
text-align: center;
}
.container {
height: 2000px;
position: relative;
}
.topbar {
height: 50px;
line-height: 50px;
background: #D16666;
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 0px;
z-index: 10;
}
.sidebar {
position: -webkit-sticky;
position: sticky;
border-radius: 5px;
top: 60px;
height: 1000px;
line-height: 1000px;
background: #B6C649;
border-radius: 5px;
position: -webkit-sticky;
position: sticky;
}
.row {
margin-left: 0;
margin-right: 0;
position: relative;
}
.main-content {
height: 1800px;
line-height: 1800px;
background: #2C4251;
border-radius: 5px;
top: 10px;
}
.col-8 {
top: 10px;
padding: 0;
padding-left: 0 !important;
}<html>
<head>
<link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="topbar">Topbar</div>
<div class="row">
<div class="col-4">
<div class="sidebar">Sidebar</div>
</div>
<div class="col-8">
<div class="main-content">Main Content</div>
</div>
</div>
</div>
</body>
</html>