Важно знать, что для того, чтобы div был липким, он должен иметь определенную высоту. Если я правильно понял, что вы хотите сделать, проблема в вашем предыдущем коде заключается в том, что вы помещаете липкий div внутри боковой панели, а затем назначаете высоту боковой панели.
Кроме того, с ним легче работать отдельные div, то есть, div вашей боковой панели и ваш контент div.
В этом решении я добавил display: flex к основному div (.filtering) и поместил ваш текстовый контент в другой div (.main-content) , Теперь ваша боковая панель прикреплена только внутри основного div. Однако вы также должны знать, так как вы нажимаете кнопку, чтобы открывать и закрывать div рядом с текстовым содержимым, я решил, что вы не хотите, чтобы он был липким.
Вот решение: (и скрипка )
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100vh;
width: 0;
z-index: 2;
width: 250px;
position: sticky;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
}
.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{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.main-content {
flex: 1;
}
#subfilterheader{
color: white;
font-size: 21px;
margin-top: 30px;
margin-left: 40px;
}
#filterlist{
margin-left: 15px;
color: white;
}
.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;}
}
<!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">
<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>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div class="main-content">
<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>
<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>
</div>
<h1>Bottom text</h1>
</body>
</html>