Background Scrolling is possible whilst menu is open(Codepen Included) - html

Question

I have a navbar which disappears whilst scrolling up. When I open the hamburger menu, however, I am still able to have background scrolling as the navbar disappears. Is there a way to have the navbar static(in smaller windows) or just be able to disable background scrolling when the menu is open? Codepen Included below:
https://codepen.io/blairhunter/pen/PoNYOzj
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("diss").style.top = "0";
} else {
document.getElementById("diss").style.top = "-81.5px";
}
prevScrollpos = currentScrollPos;
}
Thank you.

Answer 1

i think this is what you want:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("diss").classList.remove("hide");
} else {
document.getElementById("diss").classList.add("hide");
}
prevScrollpos = currentScrollPos;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#diss {
position: fixed;
width: 100%;
transition: transform 0.3s;
}
#diss.hide {
transform: translateY(-100%);
}
nav{
background: white;
height: 80px;
width: 100%;
display: block;
transition: top 0.3s;
}
label.logo{
color: black;
font-size: 26px;
line-height: 80px;
padding: 0 130px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
}
nav ul{
float: right;
margin-right: 130px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 2px;
}
nav ul li a{
color: black;
font-weight: 500;
font-size: 16px;
padding: 7px 13px;
/* text-transform: uppercase; */
font-family: 'Poppins', sans-serif;
}
a.active,a:hover{
text-decoration: underline;
}
.checkbtn{
font-size: 30px;
color: black;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 27px;
padding-left: 25px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
margin-right: 40px;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #212120;
top: 81.5px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
color:white;
}
a:hover,a.active{
background: none;
color: white;
}
#check:checked ~ ul{
left: 0;
}
}
/* Content */
.divide {
height:1.5px;
background-color:lightgrey;
}
.main {
margin-top:80px;
height:400px;
background-color:#212120;
}
.detail {
font-size:30px;
font-family: 'Poppins', sans-serif;
line-height: 40px;
font-weight: 500;
color:#fbccc9;
padding-left: 130px;
padding-right:130px;
padding-top:15px;
}
.pagetitle {
font-size:46px;
font-family: 'Poppins', sans-serif;
line-height: 55px;
font-weight: 600;
color:white;
padding-left: 130px;
padding-right:130px;
padding-top:100px;
}
#media (max-width: 952px){
.pagetitle{
padding-left: 25px;
padding-right: 25px;
padding-top:50px;
font-size: 26px;
}
.detail{
padding-left: 25px;
padding-right: 25px;
padding-top:20px;
font-size: 18px;
}
.main {
height:310px;
}
.diss {
position:fixed;
}
}
/* Container */
.container {
padding-left: 130px;
padding-right:130px;
}
.heading {
font-size:30px;
font-family: 'Poppins', sans-serif;
line-height: 40px;
font-weight: 600;
padding-top:25px;
padding-bottom:10px;
}
#media (max-width: 952px){
.container{
padding-left: 25px;
padding-right: 25px;
}
/* Project Boxes */
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 952px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="icon" type="image/png" href="img/favicon.jpg"/>
<div id="diss">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Name</label>
<ul>
<li>Home</li>
<li>Profile</li>
<li>Work</li>
</ul>
</nav>
<div class="divide"></div>
</div>
<div class="divide"></div>
</head>
<body>
<div class="main">
<h1 class="pagetitle">Hello, this is the main text.<h1>
<h2 class="detail">This is the subheading here</h2>
</div>
<section class="container">
<h2 class="heading">Title</h2>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column">
<img src="img/placement.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Lights" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Mountains" style="width:100%">
</div>
<!-- END GRID -->
</div>
</section>
</body>
</html>