On scrolling down a space can be seen above my sidebar - html

Question

Open the sidebar by clicking on left of Hakuna-Mipaka and just scroll down you will get the problem.
Whenever I open my sidebar and scrolls down then a space can be seen over my sidebar, i want my sidebar to be stick to the navbar even after I scroll it down.
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
height:100%;
background:#042331;
transition:all .5s ease;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
left:0;
position: fixed;
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Open the sidebar by clicking on left of Hakuna-Mipaka and just scroll down you will get the problem.
Whenever I open my sidebar and scrolls down then a space can be seen over my sidebar, i want my sidebar to be stick to the navbar even after I scroll it down.

Answer 1

When opening the menu, the "Hakuna-Mipaka" caption is not obscured by the sidebar box. Everything I changed I marked in the css code.
/*$(window).scroll(function (event) {
var top = $(window).scrollTop();
var height_nav = $(".nav").height();
if (top >= height_nav+22) {
$(".sidebar").css('top', 0);
} else {
$(".sidebar").css('top', height_nav-top+22);
}
});*/
window.addEventListener('scroll', function(e) {
let top = window.pageYOffset;
let height_nav = document.getElementsByClassName('nav')[0].scrollHeight;
let sidebar_top = document.getElementsByClassName('sidebar')[0];
if (top >= (height_nav - 2)) {
sidebar_top.style.top = 0 + 'px' ;
} else {
sidebar_top.style.top = (height_nav - (top - 2)) + 'px' ;
}
});
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
/*height:100%;*/
height:100vh; /*add*/
background:#042331;
/*transition:all .5s ease;*/
transition-duration: .5s;
transition-property: left;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
/*position: sticky;*/ /*add*/
/*top: 0;*/ /*add*/
left:0;
/*position: fixed;*/
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 2

You must set both x and y offset if you want an element position as fixed. You can fix it by adding top: 0; to #check:checked ~ .sidebar.
Example:
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
height:100%;
background:#042331;
transition:all .5s ease;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
left:0;
position: fixed;
top: 0;
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>