On scrolling down a space can be seen above my sidebar

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><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></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><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
            <li><a href="#"><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></a></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><a href="#"><i class="fa fa-user"></i>About us</a></li>
            <li><a href="#"><i class="fa fa-comment-alt"></i>Feedback</a></li>
        </ul>
    </div>

    <div class="parent-container">
        <div class="container1">
            <div class="container1-items"><a href="#"><i class="fas fa-hotel"></i>name</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-address-card"></i>Address</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-phone-square-alt"></i>Phone_number</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-building"></i>City</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-fax"></i>Pincode</a></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><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></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><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
            <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
            <li><a href="#"><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></a></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><a href="#"><i class="fa fa-user"></i>About us</a></li>
            <li><a href="#"><i class="fa fa-comment-alt"></i>Feedback</a></li>
        </ul>
    </div>

    <div class="parent-container">
        <div class="container1">
            <div class="container1-items"><a href="#"><i class="fas fa-hotel"></i>name</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-address-card"></i>Address</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-phone-square-alt"></i>Phone_number</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-building"></i>City</a></div>
            <div class="container1-items"><a href="#"><i class="fas fa-fax"></i>Pincode</a></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>