CSS中的固定标题用于条件滚动下？

Question

我想制作一个头部div（类似横幅），只有当用户向下滚动时，头部尝试离开屏幕时才会固定。是否可能在不使用JS的情况下实现？例如在Facebook时间线中，如果我们向下滚动，横幅会在页面头部离开屏幕时浮动。我的问题是，是否可以仅使用CSS来实现此目的？

如果不太清楚，我想知道是否可以有条件地应用样式“position：fixed”，例如当页面滚动80px时。

- Roy

---

CSS不是有条件的。据我所知，这只能通过JS实现。 - Rick Calder

我同意Rick的观点。使用Jquery可以让代码更简洁易懂。 - Bilal Fazlani

你需要使用一点js来将新的固定位置类应用于横幅/导航栏，否则无法实现。我不建议仅仅为了应用这个类和进行测量而使用jQuery，那样会过度。 - rlemon

话虽如此：这里是jQuery演示 http://jsfiddle.net/rlemon/VZfXE/3/ ，如果jsFiddle停止傻瓜化，我将会更新一个不带框架的演示。 - rlemon

这可以通过CSS实现。 - techfoobar

Answer 1

可以。你只需要使用CSS就能实现。方法是将一个普通的滚动头部放在固定的头部上方，在普通头部向上滚动时，固定头部才会出现。这与http://techcrunch.com的做法有些类似。

[更新于 2013 年 10 月 31 日] - TechCrunch 最近更改了他们的用户界面，所以你不能在那里看到这个了！

请查看此演示：http://jsfiddle.net/WDnyb/2/

HTML

<div class="header">Header</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

相关CSS

.header {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    position: relative;
    height: 100px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    margin-top: 100px;
}

- techfoobar

---

很好，我不知道这个技巧。+1 - rlemon

你，@techfoobar先生，真是太棒了！我有一种预感，我可以在CSS中做些什么！非常感谢你！ - Roy

这种方法的一个问题是，.outer 只能遮盖 .header 的 _一部分_。对于大标题或小滚动增量，您可以轻松看到两个标题。 - Jeroen Versteeg

很酷的方法 :), 只可惜你必须要两次使用标题。 - MMachinegun

这看起来不正确。每个标题的内容最终会“重叠”，导致重复效果。不太清晰。 - Kevin Cantwell

我和@KevinCantwell一样，不完全干净和无缝。如果您可以将固定的“Header”文本放在其他文本前面，那就太棒了，因为您不会看到其他文本向上滑动。 - Ads

Answer 2

现在可以使用 position: sticky 来正确地实现此操作，无需使用 JavaScript。请参考 https://css-tricks.com/position-sticky-2/ 上提供的示例。

注意：目前该功能不支持 IE11、Opera Mini 和 Android 的原生浏览器，详情请参见 https://caniuse.com/#feat=css-sticky。

- L0laapk3

Answer 3

使用 CSS 是不可能的。您可以使用 JavaScript 或 jQuery 进行操作，因为这需要一些条件。

- naresh kumar

---

点赞是因为被接受的答案不正确。你需要JavaScript来进行干净的实现。 - Kevin Cantwell

Answer 4

Html----included my content within

   <header1>
       ..............
  </header1> 

 JS

  <script>
  $(document).ready(function() {
   var $header1 = $("header1"),
    $clone = $header1.before($header1.clone().addClass("clone"));

     $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
 });
 });
</script>

我已经使用了上面的脚本来固定页眉，在谷歌浏览器中可以正常工作，但在火狐浏览器中不行。

- anya