Question

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

如果不够清楚，我想知道是否可以有条件地应用样式“position：fixed”，就像滚动页面的80px一样。

Answer 1

是的。你可以只使用CSS。这是通过将一个普通的滚动标题放在固定标题之上来完成的，只有在正常滚动标题向上滚动之后才能显示。这就是http://techcrunch.com正在做的事情。

更新[2013年10月31日] - Techcrunch最近更改了用户界面，因此您再也看不到它了！

<强> 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;
}

Answer 2

现在可以使用position: sticky正确完成此操作，而无需javascript。

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

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

Answer 3

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

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>

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

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

4 个答案: