I built a scroll function to hide the navigation (.li) and show the burger-menu (#menu). Farther I built a click function on the burger-menu to open the fullSizeMenu.
After the second click event to hide the fullSizeMenu, the scroll function no longer works as built. By scrolling back to top, the navigation is not displayed although it should at a wide over 1100px.
How can I implement this without having to install a reload?
$(document).ready(function() {
var open = false;
$(window).scroll(function() {
if (document.documentElement.scrollTop > 50 ) {
$('.li').addClass('remove-li');
$('#menu').show();
}
else {
$('.li').removeClass('remove-li');
$('#menu').hide();
}
})
$('#menu').click(function() {
if(open = !open){
$('.fa-bars').addClass('fa-times');
$( ".li" ).wrapAll( "<div class='fullSizeMenu' />");
$('.fullSizeMenu').show();
$(".li").removeClass('remove-li');
$('.li').addClass('change-li');
$('a').addClass('change-a');
$(window).off('scroll')
}
else {
$('.fa-bars').removeClass('fa-times');
$( ".li" ).unwrap();
$('.fullSizeMenu').hide();
$(".li").addClass('remove-li');
$('.li').removeClass('change-li');
$('a').removeClass('change-a');
// window.location.reload(true);
}
})
})body {
background: rgb(238, 238, 238);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 100vh;
}
/* Header with Navigation */
header {
height: 80px;
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
width: 60%;
left: 20%;
position: relative;
}
#menu {
display: none;
background-image:linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
ul {
float: right;
}
ul li {
padding: 10px;
list-style: none;
float: left;
}
.remove-li {
display: none;
}
.change-li {
width: 100%;
float: left;
color: white;
font-size: 30px;
display: initial !important;
margin-top: 20px;
}
ul li a {
font-family: 'Open Sans';
font-size: 12px;
color:darkgrey;
text-decoration: none;
}
.change-a {
font-size: 26px;
color: white;
}
.logo {
width: 150px;
height: 20px;
margin-top: 30px;
}
button {
width: 70px;
height: 25px;
border: none;
outline: none;
float: right;
border-radius: 6px;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.button-text {
font-size: 12px;
color: white
}
/* FullSizeMenu */
.fullSizeMenu {
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 40px;
text-align: center;
padding: 50px 0;
top: 80px;
left: -50%;
height: 100vh;
width: 200%;
position: absolute;
display: block;
overflow: auto;
}
/* Header with Navigation Mobile */
@media (max-width: 1100px) {
.header {
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
position: relative;
text-align: center;
top: 10%;
left: 10%;
width: 80%;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.logo {
float: left;
}
.button {
display: none;
}
#menu {
display: block !important;
float: right;
}
ul .li {
display: none;
}
.remove-li {
display: none;
}
.change-li {
color: white;
font-size: 30px;
display: block !important;
width: 100%;
float:left;
}
.li .a{
color: white;
margin-right: 50%;
}
.fullSizeMenu {
margin-top: -10px;
}
}
/* Main Content with Paginated Image Slide */
main {
margin: 0;
padding: 0;
}
.slider-container {
width: 60%;
margin-top: 15%;
left: 20%;
background: white;
overflow: hidden;
height: 300px;
position: relative;
user-select: none;
}
input {
display: none;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.image-container {
width: 50%;
height: 100%;
float: left;
}
img {
width: 100%;
height: 100%;
}
.article-container {
width: 50%;
height: 100%;
float: left;
padding: 20px;
overflow: auto;
box-sizing: border-box;
}
h1 {
font-family: 'Arvo';
color: rgb(35, 182, 182);
}
p {
font-size: 14px;
color: darkgrey;
}
#pagination {
width: 100%;
bottom: 5%;
position: absolute;
text-align: center;
z-index: 99;
cursor: default;
}
#pagination .dots {
float: right;
width: 8px;
height: 8px;
margin-right: 20px;
position: relative;
border-radius: 100%;
display: inline-block;
background: white;
border: 2px solid rgb(54, 54, 54);
transition: .4s;
cursor: pointer;
}
#pagination .dots:hover {
background: rgb(54, 54, 54);
}
#i1:checked ~ #slide1,
#i2:checked ~ #slide2,
#i3:checked ~ #slide3{
z-index: 9;
animation: scroll 1s ease-in-out;
}
#i1:checked ~ #slide1 #dot1 {background: rgb(54, 54, 54);}
#i2:checked ~ #slide2 #dot2 {background: rgb(54, 54, 54);}
#i3:checked ~ #slide3 #dot3 {background: rgb(54, 54, 54);}
@keyframes scroll {
0% { opacity: .4;}
100% { opacity: 1;}
}
/* Main Content with Paginated Image Slide Mobile*/
@media screen and (max-width: 768px) {
.slider-container {
margin-top: 30%;
left: 10%;
width: 80%;
height: 500px;
}
.image-container {
width: auto;
height: 200px;
}
.article-container {
width: auto;
height: auto;
padding: 20px;
text-align: center;
overflow: auto;
}
#pagination .dots {
float: none;
}
}
/* Footer */
footer {
margin: 0;
padding: 0;
padding: 5%;
color: rgb(54, 54, 54);
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./app.js" type="text/javascript"></script>
<title>XXX</title>
</head>
<body>
<header>
<nav class="nav-container">
<a href="#!">
<img class="logo"src="./assets/images/logo.png">
</a>
<ul>
<li class="li">
<a href="#!">Startseite</a>
</li>
<li class="li">
<a href="#!">Autos</a>
</li>
<li class="li">
<a href="#!">Standorte</a>
</li>
<li class="li">
<a href="#!">Hilfe</a>
</li>
<li class="li">
<a href="#!">Kontakt</a>
</li>
<li class="li">
<button>
<a class="button-text" href="#!">Login</a>
</button>
</li>
<li>
<i class="fas fa-bars" id="menu"></i>
</li>
</ul>
</nav>
</header>
<main>
<div class="slider-container">
<input type="radio" id="i1" name="images" checked/>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<div class="slide" id="slide1">
<section class="image-container">
<img src="./assets/images/affen.jpg">
</section>
<section class="article-container">
<article>
<h1>Porsche</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide2">
<section class="image-container">
<img src="./assets/images/giraffen.jpg">
</section>
<section class="article-container">
<article>
<h1>Audi</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide3">
<section class="image-container">
<img src="./assets/images/loewen.jpg">
</section>
<section class="article-container">
<article>
<h1>VW</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div id="pagination">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
</div>
</div>
</main>
<footer>
<p> Copyright by xxx</p>
</footer>
</body>
</html>So your implementation has quite some bad practices to begin with. A quick fix for your problem would be to add the $('body').css('overflow', 'hidden'); when the #menu is open and remove this css when menu is closed.
This way you can remove completely the $(window).off("scroll"); which is causing the scrolling event to stop, that's why you don't have the expected behaviour.
But I would refactor it completely since you are wrapping li element with a div inside ul which is not the way it should go, also naming classes such as <li class='li'></li> doesn't make sense.
If I can find more time I can provide you with an easy way to refactor this but for now I think the CSS trick will do to fix your issue. I've created this pen so you can see it working: https://codepen.io/anon/pen/ejQxrV