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

【问题标题】：javascript/jquery: scroll function does not work after running click functionjavascript/jquery：运行点击功能后滚动功能不起作用
【发布时间】：2018-08-08 00:05:28
【问题描述】：

我构建了一个滚动功能来隐藏导航 (.li) 并显示汉堡菜单 (#menu)。更进一步，我在汉堡菜单上构建了一个点击功能来打开 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>

【问题讨论】：

能否也添加您的 html，或者更好的是，使用 Stackoverflow 代码片段创建一个工作示例？仅使用 jquery 代码，至少对我而言，很难准确理解您的问题。谢谢！ :)
正如@ReSedano 建议的那样，请提供一个工作示例，因为根据您的描述，您的任务似乎可以通过更简单的方法来完成。
@ReSedano 我添加了一个代码 sn-ps 但我的问题发生在超过 1100 像素的宽度上，因为导航是从这个宽度开始显示的。我认为运行代码 sn-p 并没有显示这个范围。感谢您的帮助：D
@JohnBaker 添加了代码 sn-p。感谢您提供任何进一步的帮助。

标签： javascript jquery click scrolltop

【解决方案1】：

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

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

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

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

【讨论】：