Question

我有点2个页脚。一个普通的灰色页脚和一个固定在窗口底部的蓝色页脚。

我希望当用户向下滚动时，蓝色页脚位于灰色页脚顶部而不是保留在窗口底部。

这是我得到的一个例子：

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

预页脚固定在页脚底部

1 个答案: