css - 固定在位于页脚上的底部的预页脚

标签 css css-position

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

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

这是我得到的例子:

http://jsfiddle.net/fV3Tz/

最佳答案

我认为你将不得不求助于 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/

相关文章:

CSS:如何更改工具提示位置以与触发元素对齐(其余代码有效)

jquery - 如果在视口(viewport)中不可见,则使用 JQuery 更改 div 元素的位置

css - 塑造div的 Angular 落

css - 删除 block 中的水平滚动,其中包含 "position:absolute"div

html - 改变元素的位置 - 响应式网站

html - Css 内容被截断

ios - 如何为 safari 创建一组 css 规则

jquery - 仅在 Chrome 中使用背景固定图像和 jquery.Animate 时出现错误

javascript - 如何修复动画类的一部分?

html - CSS:页面底部而不是窗口的位置元素