CSS：

Question

我试图让我的页面在用户滚动600px之前不显示标题。我通过解析jquery文档来提出下面的代码，但我似乎无法使其工作。对正确方向的一点帮助将非常感激。谢谢！

更新：我已经明白了。我在课程名称之前有选择器时段。虽然我没有看到持续时间的转变。 $（“header”）。removeClass（“header-hidden”， 1000 ）; 有什么建议吗？

HTML

 <header class="header-fixed header-hidden shadow">
<section>
  <nav>
    <ul>
      <li>one</li>
          <li>two</li>
        </ul>
  </nav>
</section>
 </header>

CSS

.header-fixed { position: fixed; top: 0; left: 0; width: 100%; }
.header-hidden { display: none;  }
header { z-index: 999; margin: 0; overflow: hidden; height: 70px; background: rgba(255, 255, 255, 0.9); position: relative; }

Jquery的

    <script>
      $(window).scroll(function () { 
        if ($(this).scrollTop() < 600) {
          $("header").removeClass("header-hidden", 1000);
        }
                else
                  $("header").addClass("header-hidden", 1000);
      });
    </script>

Answer 1

如果您打算隐藏标题，直到用户点击600px。我建议更改你的CSS，以便默认隐藏标题，然后在需要时只做一个简单的jQuery .show()和.hide()

CSS：

header { 
  background: #ccc; 
  display: none;
  height: 70px; 
  left: 0; 
  margin: 0; 
  overflow: hidden; 
  position: fixed; 
  top: 0; 
  width: 100%;
  z-index: 999; 
}

的jQuery：

jQuery(function($) {
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $('header').hide();
    } else {
      $('header').show();
    }
  });
});

jsFiddle

有一件事你错了removeClass()没有过渡参数。只有没有.

的类参数

Answer 2

只是要添加该类，您不必指定“。” （点）。

<script>
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $(this).addClass("header-hidden");
    }
  });
</script>

Answer 3

这是对问题第二部分的回答：

“我没有看到持续时间转换过火。$（”header“）。removeClass（”header-hidden“，1000）;有什么建议吗？”

我检查了jQuery api，它看起来不像removeClass可以采用转换选项。

http://api.jquery.com/removeClass/

如果您希望Header作为动画淡入淡出并作为动画淡出，您将要使用jQuery动画功能。例如

$（ “头”）淡入（1000）;

$（ “头”）淡出（1000）;

您可以应用的所有jQuery“效果”的链接在这里：

http://api.jquery.com/category/effects/

希望有所帮助！

用jquery隐藏滚动标题

3 个答案:

CSS：

的jQuery：