javascript / jquery：运行点击功能后，滚动功能不起作用

Question

我构建了一个滚动功能来隐藏导航（.li）并显示汉堡菜单（#menu）。 此外，我在burger菜单上构建了一个click函数来打开fullSizeMenu。

在第二次单击事件以隐藏fullSizeMenu之后，滚动功能不再按内置方式运行。 通过滚动回到顶部，导航不会显示，尽管它的宽度应超过1100像素。

如何在无需安装重新加载的情况下实现此目的？

 $(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> 

Answer 1

因此，您的实现一开始就有很多不好的做法。 解决此问题的快速方法是添加$('body').css('overflow', 'hidden'); #menu打开时，关闭菜单时删除此CSS。

这样，您可以完全删除$(window).off("scroll"); 这导致滚动事件停止，这就是为什么您没有预期的行为的原因。

但是我会完全重构它，因为您在ul内用div包裹了li元素，这不是应该的方式，而且对诸如<li class='li'></li>命名也没有意义。

如果有更多时间，我可以为您提供一种简便的方法来进行重构，但是目前，我认为CSS技巧可以解决您的问题。 我已经创建了这支笔，以便您可以看到它的工作原理： https : //codepen.io/anon/pen/ejQxrV