Question

我希望移动汉堡包菜单在向下滚动页面后淡入桌面屏幕尺寸。除非用＆＃34; x＆＃34;关闭移动菜单，否则我有这个工作，然后汉堡菜单显示在页面顶部的常规菜单上。我希望它能恢复到加载状态。

以下是测试网站：

https://josh-unger-4lts.squarespace.com

以下代码是我到目前为止所尝试的：

<script>
 $(function() {
 $(window).on("scroll", function() {
 if($(window).scrollTop() > 100) {
   $(".Header.Header--top").addClass("change");
 } else {

$(".Header.Header--top").removeClass("change");
 }
 });
 });  
 </script>

 <script>
$(function() {
 $(window).on("scroll", function() {
 if($(window).scrollTop() > 100) {
$(".Mobile.loaded").addClass("burger");
} else {


$(".Mobile.loaded").removeClass("burger");
 }
 });
  });  
 </script>
 <script>
  $(document).ready(function(){
   $(".close-icon").click(function(){
  $(".Mobile.loaded").addClass("change");
  });
   });
    </script>

更改和扩展的CSS：

   .change {display:none;}

     .burger {display: block;
     position: fixed;
    top: 0px;
     left: 0px;
    z-index: 1001;
      }

      .expand {display:block !important;}

Answer 1

我查看了您网站上的代码，我找到了您在问题中未提及的代码段：

$(document).ready(function(){
    $(".Mobile-bar-menu").click(function(){
        $(".Mobile.loaded").addClass("expand");
    });
});

这（单击汉堡时）会将 expand 类添加到强制显示它的 .Mobile.loaded 标记中。此标签包括汉堡按钮和移动菜单。因此，显示移动菜单需要添加展开类，但移动菜单关闭后您不会删除该类。

因此，您需要做的是在单击“X”按钮时删除 expand 类：

$(document).ready(function(){
    $(".Mobile-overlay-close").click(function(){
        $(".Mobile.loaded").removeClass("expand");
    });
});

注意：这是一种解决方法，您的代码中应该重新构建许多内容。

同样在您的帖子中，将网站链接中的 .com3 更改为 .com 以使其可访问，并在问题中发布所有相关代码，以便其他人可以也有好处。

在桌面滚动时淡入汉堡菜单

1 个答案: