Javascript fadeOut（）隐藏所有标题，我只想隐藏h1_Javascript_Jquery_Html_Css

Javascript fadeOut（）隐藏所有标题，我只想隐藏h1

javascript jquery html css

Javascript fadeOut（）隐藏所有标题，我只想隐藏h1,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当滚动大于850时，我试图隐藏h1，但当滚动小于850时，也会隐藏导航。如果我隐藏nav而不隐藏h1，那么它不会返回fadeIn（）我不明白为什么导航被隐藏，如果我要求你只隐藏id“#marca” HTML和CSS <!DOCTYPE html> <html lang="es" dir="ltr"> <head> <meta charset="utf-8"> <title></title> &

当滚动大于850时，我试图隐藏h1，但当滚动小于850时，也会隐藏导航。如果我隐藏nav而不隐藏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>


.标题{
位置：固定；
利润上限：-23px；
宽度：100%；
高度：70像素；
}
马卡先生{
显示：块；
}
h1{
文本对齐：居中；
填充顶部：15px；
页边距底部：0；
}
H1A{
文字装饰：无；
颜色：黑色；
}
瓦乔先生{
高度：3000px；
}
/*菜单标题*/
.黑人菜单，
.布兰科菜单{
利润上限：-35px；
/*显示器：flex；
证明内容：柔性端*/
浮动：对；
}
.菜单黑人a，
.布兰科a菜单，
.menu negro img，
.布兰科菜单{
右边距：10px；
}
.布兰科菜单{
显示：无；
}

这是我的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()
    }
  })
})

$（文档）.ready（函数（）{
马尔卡=$（“#马尔卡”）
menuNegro=$（“#菜单黑人”）
$（窗口）。滚动（函数（）{
window_y=$（window.scrollTop（）
滚动_临界=850
如果（窗口>滚动&&marca.css（'display'）=“block”）{
马尔卡·淡出（）
}
如果（窗口

问题不在于淡出隐藏了整个导航，而在于

当

h1

marca被隐藏时，

菜单negro

停止向他浮动，并开始向父元素浮动，因此它只是上升，因为

标题有一个边距顶部：-23px和菜单具有页边距顶部：-35px，您可以做的是添加一个类来更改nav like的边距
$(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()
    }
  })
})

    .menu-negro.no-margin-top {
      margin-top: 23px;
    }