淡入元素显示在页面加载时

Question

我使用 jquery 在滚动时淡入汉堡菜单，但由于某种原因它在加载时显示，然后当您滚动时它会淡出并再次淡入。向下滚动并备份后，它的行为正确，只是它在初始页面加载时显示的问题。如何停止它在加载时显示？

jQuery(document).ready(function( $ ) {
$(window).scroll(function () {
if ($(this).scrollTop() > 30) {
$('#menuhamburger').fadeIn();
} else {
$('#menuhamburger').fadeOut();
}
});
});

Answer 1

滚动侦听器是在ready事件完成后，这意味着首先将加载页面，然后监视滚动。

因此，如果您希望隐藏最初的汉堡菜单，则必须具有初始隐藏状态

#menuhamburger{
display:none;
}

或者你还必须在$(document).ready()之后直接执行你的逻辑

下面是第一个变体的示例，其中元素 #menuhamburger 最初是隐藏的

jQuery(document).ready(function( $ ) {
$(window).scroll(function () {
if ($(this).scrollTop() > 30) {
$('#menuhamburger').fadeIn();
} else {
$('#menuhamburger').fadeOut();
}
});
});

#container{
height:10000px;
}
#menuhamburger{
position:fixed;
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

<div id="menuhamburger">
Menu
</div>
</div>