css - フッターの上にある下部に固定されたプリフッター

Question

私はちょっと2フッターを持っています。通常の灰色のフッターとウィンドウの下部に固定されている青いフッター。

ユーザーが下にスクロールするときに、ウィンドウの下部に留まるのではなく、灰色のフッターの上に青いフッターを配置するようにします。

これが私が得たものの例です：

http://jsfiddle.net/fV3Tz/

Answer 1

これを実現するにはjsに頼る必要があると思います。純粋なCSSソリューションが実際にあるかどうか聞きたいのですが、私はそれを疑っています. 小さな js の例でフィドルを更新しました: http://jsfiddle.net/fV3Tz/1/

ご覧のとおり、私が行ったのは、数行の jQuery を追加したことだけです。

$(window).scroll(function() {  // when scrolled
    footTop = $('#footer').offset().top;  // check top off footer
    windowBottom = $(this).scrollTop() + $(this).height()  // check bottom of viewport
    if (footTop <= windowBottom) { // if top of footer in view
       $("#footer-azul").css('bottom', windowBottom - footTop); // move the azul up with the amount of footer that is in view
    } else {  // if top of footer not in view
          $("#footer-azul").css('bottom', 0);    // move the azul all the way down        
    }             
});​