14

ユーザーが下にスクロールしたときにヘッダーが画面から出ようとしているときにのみ、ヘッダーdiv（バナーなど）を修正したいと思います。JSを使わずにできるのでしょうか？Facebookのタイムラインの例では、下にスクロールすると、ページのヘッダーが画面から消えるとすぐにバナーが浮き上がります。私の質問は、CSSだけでできるのかということです。

はっきりしない場合は、ページの80pxをスクロールするときのように、「position：fixed」というスタイルを条件付きで適用できるかどうかを知りたいです。

4

4 に答える 4

45

はい。CSSだけでそれを行うことができます。これは、通常のスクロールヘッダーを固定ヘッダーの上に配置することで実行されます。このヘッダーは、通常のスクロールヘッダーが上にスクロールした後にのみ表示されます。これはhttp://techcrunch.comがそれを行っている方法の一種です。

アップデート[2013年10月31日]-Techcrunchは最近UIを変更したので、もうそこには表示されません！

このデモを確認してください：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>

上記のスクリプトを使用してヘッダーを修正しました。Firefoxではなくgooglechromeで正常に動作します。

于 2014-04-11T06:58:44.387 に答える