如何将页脚粘贴到页面底部，同时以类视差效果向上移动页脚？

我有一个项目，需要将页脚向上滚动（#footer），同时以类视差效果向下滚动页面。当您开始向下滚动页面时，页脚应该开始向上移动，直到其在视口的（底部）可见。如何将页脚粘贴到页面底部，同时以类视差效果向上移动页脚？

页脚在到达视口顶部时，应该覆盖大部分前面的<div>。

该页面可以具有类似的HTML结构是这样的：

<body> 
    <div id="sectionA" class="div">First section</div> 
    <div id="sectionB" class="div">Second section</div> 
    <div id="sectionC" class="div">Third section 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
    <div id="footer" class="div cf">Footer</div> 
</body>

视差般的效果是通过实现的JavaScript/jQuery的加入动态负值（相对定位的的top CSS属性）页脚。下面是代码它所事项：

var $window = jQuery(window), 
    $footer = jQuery("#footer"), 
    $viewport = window.innerHeight, 
    $startEffect = $footer.offset().top - $viewport; 

function footerParallax() { 
    var $scrollPos = $window.scrollTop() - $startEffect, 
     $ratio = 0.6; 
    $footer.css({ 
     top: -($scrollPos * $ratio) 
    }); 
} 

$window.scroll(function() { 
    footerParallax(); 
});

的（明显）的问题是，一旦top财产开始得到一个负值，页脚开始从页的底部离开。

我已经准备了一个JSFIDDLE和指定的颜色给每个部分，body以使其更清晰。滚动到底部后，页脚底部会显示body（深红色）。

我试过了什么？

修改margin-top代替top属性：这是卓有成效的，但如前述<div>具有由页脚（#sectionC在上面的例子中）覆盖重叠页脚的内容，打破其布局不管它由于它的z-index属性而不可见（在小提琴中添加了一些浮动框以使其明显.... clearfix hack也没有帮助）
设置static位置到页脚：top或margin-top都不会对有影响元素。
更改/动态减少的#sectionC的height代替页脚top以产生移动第二向上的效果：页脚停止只要height移动等于0（均未负大小或负补白被允许）
将html和/或body标签动态更改为height无效。

我也尝试了一些视差插件，如skrollr和skrollr-stylesheets和其他一些。

用这种溶液（同与其他人）的问题是，它中继在以像素测量和在data属性设置的页脚的特定（偏移）的位置，但如果动态内容的变化，例如使用的砌筑插件将文档中的元素排列在文档的另一部分，这些措施变得不准确，页脚可能会过早或过晚地移动。

顺便说一句，其他的CSS粘的页脚技术是行不通的，因为，他们实际上推页脚到页面的底部，在这里，我们正在做的正好相反。

我想这个问题可以是：

如何页脚坚持守到页面的底部，而它向上移动？ - 或 -
如何降低文档的末尾和页脚的底部边缘之间的间隙0？

我开始认为这个问题没有一个真正的解决方案，或者我可能已经太累了，看不到明显的问题。我有兴趣学习替代解决方案或通过CSS/JavaScript/jQuery或上述所有方法进行攻击。

记住，我不问如何创建，除非完全不同的方法的视差效果（或调整现有的JS代码）解决了位置的问题。

重要：请考虑，这是一个WP网站与XHTML 1.0 Transitional DOCTYPE，并已安装了许多其他的jQuery插件像砖石，scrollTo，jQuery UI的，等我可能已经无法控制从原来的结构改变很多东西（我不想），所以这个想法是在不破坏太多东西和模块化脚本的情况下实现它。

EDIT＃1：添加了图形澄清的问题。

图A。显示常规网页滚动到最后。出于说明目的，红色方块表示视口，并且页脚（灰色）被轻微移动到右侧。 body有一个微红的背景色（正常情况下不可见），仅用于说明目的。注：每个部分的height以及页脚的height是由它们的内容（表格，图像，文本等），这样是不固定的确定。
图B。显示当前问题：如果页脚向上滚动时出现视差效果（请参阅以供参考），同时向下滚动页面，它将开始覆盖上面的任何前面部分（既不修改其自身的height或height）部分），并且它也开始从页面底部分离，因此body的颜色背景变得可见。注：越大视口（例如全屏模式）页脚向上移动（和更多的内容被它覆盖）越高
图C。是预期的结果：页脚应粘在页面底部，换句话说，它应该是页面完全向下滚动后的最后一个可见元素（而不是图B中的主体背景）。每个部分（包括页脚）的内容和大小应该（理想情况下）保持不变。话虽如此，添加底部填充底部或增加其高度并不是预期的结果，因为它会破坏其原始视觉布局。

enter image description here

来源

2013-08-29 JFK

这么多的文字，我仍然不明白你想要什么。我有话要说：skrollr不需要偏移量的绝对值。例如，你可以使用'data-bottom'，这意味着“当元素的底部位于视口的底部” – Prinzhorn

@Prinzhorn：将检查与skrollr，谢谢。 PS。如果你不明白文本检查jsfiddle。我想要的不是让背景可见（页脚底部和视口底部之间的红色间隙）是否有意义？ – JFK

对不起，我还是不明白。也许你会发现一个已经做了你所要求的页面。 – Prinzhorn

，这怎么解决？

正如我在我的问题提到的，我太累了，看到了明显的，但@ DC5的回答让我在正确的轨道上：

To help keep the footer's layout from being affected, 
wrapping the content of the footer in an absolutely 
positioned div does the trick

基础上的评论，答案变得比整个代码更简单他提出只需要：

（动态）包装页脚的内容，绝对定位的div使用jQuery的.wrapInner()方法
动画页脚通过设置margin-top属性，而不是在top财产

所以这额外的CSS：

#footerInnerWrapper { 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    background-color: #666 /* same as footer */ 
}

和微调的原代码

var $window = jQuery(window), 
    $footer = jQuery("#footer"), 
    $viewport = window.innerHeight, 
    $startEffect = $footer.offset().top - $viewport; 

// add inner wrapper 
$footer.wrapInner('<div id="footerInnerWrapper" />'); 

function footerParallax() { 
    var $scrollPos = $window.scrollTop() - $startEffect, 
     $ratio = 0.6; 
    $footer.css({ 
     // top: -($scrollPos * $ratio) 
     marginTop: -($scrollPos * $ratio) 
    }); 
} 

$window.scroll(function() { 
    footerParallax(); 
});

的伎俩。见JSFIDDLE

来源

2013-09-01 07:58:58 JFK

不错！我很高兴我能帮助。我已经得到停留在显性数学试图通过一个解决方案，而边距工作，没”不要回想起来，尝试一下你原来的，更简单的算法。 – dc5

更新版本

下面是一个更新的版本应该更好地符合您的要求。

此版本可返回到relative定位页脚元素，并使用margin-top来定位它。

margin-top的计算偏离了之前元素偏移量，高度和当前窗口滚动位置。然后，它使用任一

视口的高度如果页脚开始离屏
页脚元素（$startEffect）的初始顶值，如果页脚开始屏幕

以确定余量的实际值-最佳。

为了帮助保持页脚的布局不受此影响，将页脚的内容封装到绝对定位的div中，为示例代码提供了技巧。

Example Fiddle

CSS：

#footer > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    ... 
}

HTML：

<div id="footer" class="div cf"><div>Footer</div></div>

代码：

var $window = jQuery(window), 
    $footer = jQuery("#footer"), 
    $viewport = window.innerHeight, 
    $startEffect = $footer.offset().top; 
    $prev = $footer.prev(), 
    $useStartEffect = $startEffect < $viewport; 


function footerParallax() { 
    var $scrollPos = $window.scrollTop() - $startEffect, 
     $ratio = 0.6; 

    var prevOffset = $prev.offset().top + $prev.height() - $window.scrollTop(); 
    var marginTop = 0; 

    if(prevOffset < $viewport && prevOffset < $startEffect) { 
     if($useStartEffect) { 
      marginTop = (prevOffset - $startEffect)*$ratio; 
     } else { 
      marginTop = (prevOffset - $viewport)*$ratio;  
     } 
    } 

    $footer.css({ 
     "margin-top": marginTop + 'px' 
    }); 
} 

$window.scroll(function() { 
    footerParallax(); 
}); 

footerParallax();

来源

2013-08-31 17:09:59 dc5

差不多，在小结果区域中工作正常，但在全屏模式下运行正常http://jsfiddle.net/cnRsr/8/show/ – JFK

对于我来说，这段代码显示了背景暗红色，我认为它不应该在任何可见点。 – funkwurm

@funkwurm：是的 - 我提到了上面的要求。 – dc5

这做什么，我认为你需要，页脚棒时^ h在视图完全滚动：

jsFiddle

代码添加：

function footerParallax() { 
    var $scrollPos = $window.scrollTop() - $startEffect, 
     $ratio = 0.6, 
     $newTop = -($scrollPos * $ratio), 
     $oldTop = parseInt($footer.css('top')), 
     $nonRelTop = $footer.offset().top - $oldTop, 
     $wanted = ($window.scrollTop()+$viewport-$footer.height()); 
    if ($nonRelTop + $newTop < $wanted) { 
     $('#sectionC').css('display', 'none'); 
     $wanted = ($window.scrollTop()+$viewport-$footer.height()); 
     $nonRelTop = $footer.offset().top - $oldTop; 
     $newTop = $wanted - $nonRelTop; 
    } else { 
     $('#sectionC').css('display', 'block'); 
    }  
    $footer.css('top', $newTop); 
} 

$window.scroll(footerParallax);

并在CSS我加了这一点，以便$footer.css('top')不会产生NaN：

#footer { 
    top:0; 
    /* ... */ 
}

编辑： A完全在对OP进行更多的澄清之后新的方法。我现在有一个固定位置页脚，当用户滚动传递文档的一半时，它开始增加高度以接管整个屏幕。在HTML，CSS和Javascript已全部更新，以实现这一目标：

jsFiddle

来源

2013-08-31 17:13:48 funkwurm

差不多，工作在小面积的结果，但越野车在全屏模式http://jsfiddle.net/funkwurm/cnRsr/10/show/ – JFK

精品工程全屏幕我在Mac上使用Chrome。这对你有什么好处？ – funkwurm

在全屏，当到达页面的底部，页脚确实停止滚动，但页面的其余部分没有因此上述'div'（#sectionC）显示出来，如果页脚的高度比全屏视较小（火狐和Chrome在Windows中） – JFK

如何将页脚粘贴到页面底部，同时以类视差效果向上移动页脚？

回答

相关问题