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

因此，您的实现一开始会有很多不良做法。解决您的问题的快速方法是在{ "$project": { "_id": { "$dateFromParts" : { "year": { "$year": "$_id"}, "month": { "$month": "$_id"}, "day": { "$dayOfMonth": "$_id"} } } } } 打开时添加$('body').css('overflow', 'hidden');，并在菜单关闭时删除此CSS。

这样，您可以完全删除导致滚动事件停止的#menu，这就是为什么您没有预期的行为的原因。

但是我会完全重构它，因为您在$(window).off("scroll");内用li包装了div元素，这不是应该的方式，还命名了{{1} }没有道理。

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