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

Question

我构建了一个滚动功能来隐藏导航 (.li) 并显示汉堡菜单 (#menu)。此外，我在汉堡菜单上构建了一个点击功能以打开 fullSizeMenu。

在隐藏 fullSizeMenu 的第二次点击事件之后，滚动功能不再像内置的那样工作。通过滚动回到顶部，导航不会显示，尽管它应该超过 1100 像素。

如何在不安装 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>

Answer 1

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

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

但我会完全重构它，因为你在 ul 内用 div 包装 li 元素，这不是它应该的方式，还命名类例如 <li class='li'></li> 没有意义。

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

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

javascript/jquery: scroll function does not work after running click function

javascript

jquery

click

scrolltop