我有 2 个页脚。 一个普通的灰色页脚和一个固定在窗口底部的蓝色页脚。
我希望当用户向下滚动时,蓝色页脚位于灰色页脚之上,而不是留在窗口底部。
这是我得到的例子:
最佳答案
我认为你将不得不求助于 js 来实现这一点。我很想知道是否真的有纯 CSS 解决方案,但我对此表示怀疑。我用一个小的 js 示例更新了你的 fiddle :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
}
});
关于css - 固定在位于页脚上的底部的预页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12099343/