css - CSSでブラウザのスクロール時のヘッダーのサイズと内容を変更する

Question

ここに見られるようなものを作る方法についてのアイデアhttp://studiompls.com/case-studies/crown-maple/

ヘッダーが小さくなり、ロゴが別のボタンに変わります。JSを書かずにCSSでできますか？

乾杯！

---

アップデート：

JSが必須の場合、学習するために推奨できるリンクはありますか? ありがとう。

Answer 1

使いやすい jquery:

$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});

ただし、jsファイルがあることを確認してください

Answer 2

jqueryでできます。とても簡単です。

ここにデモがあります：http://jsfiddle.net/jezzipin/JJ8Jc/

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

Answer 3

CSS のみを使用し、Javascript を使用しないフィドルを作成して、ほぼ同じ効果を実現しました。最初のセクションを下にスクロールすると、ヘッダーが小さくなり、アイコンが変化します。もちろん、上にスクロールすると、ヘッダーが再び大きくなり、元のアイコンに戻ります。2、3 の s 以外に難解なものは何もありません:hover(およびトランジションですが、それは単なるアイシングです。トランジションを認識しないブラウザーで動作します)。

これはまさにあなたが求めているものではないかもしれませんが、ユーザーが Javascript をオフにしている場合のフォールバックとして使用できます。

Answer 4

ここにその効果に関するチュートリアル全体があり、jsなしではそれを行うことはできないと思います.スクロールをチェックする必要があり、たとえばjQueryUIでtoggleClassを実行する必要があるためです:)

それが役に立てば幸い ;）

乾杯

Answer 5

ナビゲーションの内部要素のスタイルを設定する必要があるため、ナビゲーションにクラスを追加して内部アイテムをスタイルすることをお勧めします

<div class="outer">
<div id="menu">addd</div>

とjs

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    if (sc > 50) {
        $("#menu").addClass("big");
    } else {
        $("#menu").removeClass("big");
    }
});

そして最後にcss

    #menu {
    position:fixed;
    height:50px;
    background:#ccc;
    left:0;
    top:0;
    float:left;
    width:100%;
}
.outer {
    height:800px;
}

#menu.big {
    height:20px;
}

ここにリンクがあります