14

我只想在用户向下滚动时标题试图离开屏幕时才修复标题 div（如横幅）。不使用JS可以吗？以 Facebook 时间线中的示例为例，如果我们向下滚动，一旦页面的标题离开屏幕，横幅就会向上浮动。我的问题是，是否可以只使用 CSS？

如果不够清楚，我想知道是否可以有条件地应用样式“位置：固定”，例如滚动 80px 页面时。

4

4 回答 4

45

是的。你可以只用 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;
}
于 2013-01-27T18:34:58.540 回答
7

现在可以在没有 javascript 的情况下正确完成此操作position: sticky。

有关示例，请参阅https://css-tricks.com/position-sticky-2/。

警告：在撰写本文时，IE11、opera mini和 android 的股票浏览器不支持它：https ://caniuse.com/#feat=css-sticky

于 2018-01-21T18:42:18.320 回答
1

使用 css 是不可能的。您可以使用 JavaScript 或 jQuery。因为它需要一些条件。

于 2013-01-27T18:34:54.713 回答
0 
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>

我已经使用上面的脚本来修复标题，它在 googlechrome 中工作正常而不是在 firefox 中......

于 2014-04-11T06:58:44.387 回答