Question

当滚动大于850时，我试图隐藏h1，但是当滚动低于850时，我也会隐藏导航。如果我隐藏导航但不隐藏h1，则它不会以fadeIn（）返回如果我要隐藏ID'#marca'，我不知道为什么隐藏导航。

HTML和CSS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="TitlePage">change password</h1>
<ul class="chooseChangePass">
  <li class="active" id="chPass"><a href="#changePassword" data-toggle="tab">change password</a></li>
  <li id="chUserName"><a href="#changeUserName" data-toggle="tab">change UserName</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="changeUserName">
    changeUserName
  </div>
  <div role="tabpanel" class="tab-pane fade in active" id="changePassword">
    changePassword
  </div>
</div>

这是我的jquery代码。

<!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>

Answer 1

问题不是faderOut隐藏了整个导航，而是

当h1玛卡被隐藏时，menu-negro停止向他浮动，并开始向父元素浮动，所以它上升了，因为有两件事，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;
    }

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

1 个答案: