我试图在滚动大于 850 时隐藏 h1，但当它低于 850 时也会隐藏导航。 如果我在不隐藏 h1 的情况下隐藏导航，则它不会随 fadeIn () 一起返回 我不明白为什么导航被隐藏，如果我要求你只隐藏 id '#marca'。
HTML 和 CSS
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.header {
position: fixed;
margin-top: -23px;
width: 100%;
height: 70px;
}
.marca{
display: block;
}
h1{
text-align: center;
padding-top: 15px;
margin-bottom: 0;
}
h1 a{
text-decoration: none;
color: black;
}
.vacio{
height: 3000px;
}
/* MENU HEADER */
.menu-negro,
.menu-blanco{
margin-top: -35px;
/* display: flex;
justify-content: flex-end; */
float: right;
}
.menu-negro a,
.menu-blanco a,
.menu-negro img,
.menu-blanco img{
margin-right: 10px;
}
.menu-blanco{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/proba.js" charset="utf-8"></script>
</head>
<body>
<header class="header">
<h1 id="marca"><a href="Index.html">Marca</a></h1>
<nav id="menu-negro" class="menu-negro">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
<nav id="menu-blanco" class="menu-blanco">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
</header>
<div class="vacio">
</div>
</body>
</html>
这是我的 jquery 代码。
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
marca.fadeIn()
}
})
})
最佳答案
问题不是 fadeOut 隐藏了整个导航，而是这个
当 h1 marca 被隐藏时，menu-negro 停止向他 float ，并开始向父元素 float ，所以它会上升，因为有两件事， header 有一个 margin-top: -23px; 并且菜单有一个 margin-top: -35px;，你可以做的是添加一个类来更改导航的边距，例如
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
$('.menu-negro').addClass('no-margin-top');
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
$('.menu-negro').removeClass('no-margin-top');
marca.fadeIn()
}
})
})
在CSS中添加
.menu-negro.no-margin-top {
margin-top: 23px;
}
关于javascript - fadeOut() 隐藏了所有的header 而我只想隐藏h1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53695350/