3

I'm trying to have my page not show a header until the user scrolls 600px. I've come up with the code below by parsing through the jquery docs, but I can't seem to make it work. A little help in the right direction would be much appreciated. Thanks!

UPDATE: I've figured it out. I had the selector period before the class name. I'm not seeing the duration transition fire though. $("header").removeClass("header-hidden", 1000); Any advice there?

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

3 回答 3

3

如果您打算隐藏标题，直到用户点击 600 像素。我建议更改您的 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()没有转换参数。只有类参数没有.

于 2012-12-27T20:04:02.667 回答
1

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

<script>
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $(this).addClass("header-hidden");
    }
  });
</script>
于 2012-12-27T20:02:37.390 回答
0

这是您问题第二部分的答案：

“不过，我没有看到持续时间转换触发。$("header").removeClass("header-hidden", 1000); 有什么建议吗？”

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

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

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

$("标题").fadeIn(1000);

$("header").fadeOut(1000);

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

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

希望有帮助！

于 2012-12-27T20:21:31.307 回答