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        
    }             
});​