<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我希望移动汉堡菜单在向下滚动页面后在桌面屏幕尺寸上淡入。我有这个工作，除了用“x”关闭移动菜单时，汉堡菜单然后显示在页面顶部常规菜单的顶部。我希望它恢复到加载时的状态。
这是测试站点:
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;}
最佳答案
我查看了您网站上的代码，发现了您在问题中未提及的片段:
$(document).ready(function(){
$(".Mobile-bar-menu").click(function(){
$(".Mobile.loaded").addClass("expand");
});
});
这(当单击汉堡时)将 expand 类添加到 .Mobile.loaded 标签，强制显示它。此标签包括汉堡按钮和移动菜单。因此，添加 expand 类是显示移动菜单所必需的，但您不会在移动菜单关闭后删除该类。
因此，您需要做的是在单击“X”按钮时删除 expand 类:
$(document).ready(function(){
$(".Mobile-overlay-close").click(function(){
$(".Mobile.loaded").removeClass("expand");
});
});
注意:这是一种变通方法，您的代码中有很多东西需要重新构造。
同样在您的帖子中，将网站链接中的 .com3 更改为 .com 以使其可访问，并在问题中发布所有相关代码，以便其他人可以访问也有好处。
关于jquery - 在桌面滚动上淡入汉堡菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47963706/