I'm working on creating an HTML sidebar that is constrained to the size of a div (not full-screen like typical sidebars) and also sticky. This means that when the height of the div exceeds the screen's height, the sidebar should stick to the screen and not scroll.
So far, I have achieved the first part - limiting the sidebar's height to the div it's in.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Top text</h2>
<div class="filtering">
<div id="mySidenav" class="sidenav">
<div id="sticky">
<a href="javascript:void(0)" onclick="closeNav()" class="close" id="closefilter"></a>
<div id="filterheader">Filter</div>
<div id="filtercontent">
<div id="subfilterheader">Platforms</div>
<ul style="list-style: none;" id="filterlist">
<li>
<div class="checkbox">
<label><input id="filtersteam" type="checkbox" onchange="changeFilter('steam')"/>Steam</label>
</div>
</li>
<li>
<div class="checkbox">
<label><input id="filterepic" type="checkbox" onchange="changeFilter('epic')"/>Epic</label>
</div>
</li>
<li>
<div class="checkbox">
<label><input id="filterorigin" type="checkbox" rel="origin" onchange="changeFilter('origin')"/>Origin</label>
</div>
</li>
<li>
<div class="checkbox">
<label><input id="filtergog" type="checkbox" rel="gog" onchange="changeFilter('gog')"/>GOG</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed adipiscing diam donec adipiscing tristique risus. Nullam eget felis eget </p>
</div>
<h1>Bottom text</h1>
</body>
</html>
CSS
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
position: absolute;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav #filterheader {
top: 0;
right: 25px;
font-size: 36px;
margin-left: 30px;
margin-top: 32px;
text-align: left;
color: white;
}
p{
font-size: 50px;
}
.filtering{
position: relative;
}
#subfilterheader{
color: white;
font-size: 21px;
margin-top: 30px;
margin-left: 40px;
}
#filterlist{
margin-left: 15px;
color: white;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 30px;
}
.close {
position: absolute;
right: 0px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #ffffff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
@media screen and (max-height: 450px) {
.sidenav a {font-size: 18px;}
}
JS - opening and closing of the sidebar
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
JS fiddle - https://jsfiddle.net/4a31mgw0/
My aim is to integrate it with a functionality like this: https://jsfiddle.net/yn5rv0ke/
Is there a way to make the sidebar both limited to a div and sticky?