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

更新：我已经想通了。我在课程名称前加了选择器。虽然我没有看到持续时间过渡的消息。 $（“header”）。removeClass（“header-hidden”，）;有什么建议吗？

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>

来源

2012-12-27 Zack Onisko

什么是addClass中的“1000”？你想做什么？ $（“header”）。addClass（“header-hidden”，1000）; – insomiac

我试图添加一个转换，但它看起来像.addClass/.removeClass函数需要点击事件。我用paniclater的建议来简单地使用.fadeIn和.fadeOut动画函数，这给了我想要的结果。谢谢。 –

只是要添加的类别，你不必SPE cify“。” （点）。

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

来源

2012-12-27 20:02:37 insomiac

对于转换，你可以在jquery中设置带有1000的转换持续时间的css。例如：$（this）.css（'transition-duration'，'1000s'）; – insomiac

如果您的意图是隐藏标头，直到用户点击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()没有tra无声论证。只是没了.

来源

2012-12-27 20:04:02 jsweazy

太棒了。谢谢。 –

如果你想转换它们，'hide'和'show'确实允许你插入一个以毫秒为单位的时间，就像这样'hide（1000）'将会是1秒 – jsweazy

谢谢你。我试图写一个更复杂的函数一段时间是绞尽脑汁。 .hide/.show解决方案效果很好，但是我最终使用了.slideIn函数，以便从浏览器chrome中显示标题。干杯。 –

了该类参数是一个回答你的问题的第二部分：“我没有看到持续时间过渡火虽然$

（”头“）。removeClass（”头 - 隐藏“，1000）;有任何建议吗？”

我检查了jQuery API，它看起来不像removeClass可以采用过渡选项。

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

如果你想页眉淡入作为动画和淡出，你会想用一个jQuery动画功能的动画。例如

$（“header”）。fadeIn（1000）;

$（“header”）。fadeOut（1000）;

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

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

希望帮助！

来源

2012-12-27 20:21:31 paniclater

太好了。谢谢。 –

用jquery滚动隐藏标题

回答

CSS：

的jQuery：

相关问题