Question

这可能是一个半复制的问题，但我找不到任何完全解决我想要做的事情。

我有一个固定位置的div，固定在屏幕的底部。它的z-index将它放在主要内容上。正如预期的那样，当我滚动时，它会粘在屏幕的底部，其背景图像与主要内容部分重叠。

这里变得棘手：当页脚进入视口时，我希望页脚将其推高。

我正在使用jQuery插件来查看页脚何时进入视口，然后将位置从固定更改为相对。问题是，当它执行此操作时，它会跳到主要内容div之下。

这是插件：jQuery的视口选择器（抱歉无法发布两个链接）

这是我的jQuery

   $(function() {
    $(window).bind('scroll', function(event) {
        $('footer:in-viewport').each(function() {
          $('#extra1').css('position','relative')
        });
        $('#extra2:below-the-fold').each(function() {

        });
    });
});

这是我的例子，它不完全正常，但很好地了解了我要做的事情：http://illtron.net/test/position/

另外，我正在试图弄清楚如何让事情回归到你向后滚动时的状态，并且页脚再次低于折叠，但我对插件感到有些困惑。 / p>

关于如何解决这个问题的任何想法都会很棒。如果它看起来像是以一种非常愚蠢的方式做到这一点，我愿意把它带到一个完全不同的方向。

Answer 1

也许看看这个jquery插件 - ＆gt; http://flesler.blogspot.com/2007/10/jqueryscrollto.html

由本网站实施 - ＆gt; http://www.ajax-zoom.com/index.php?cid=examples并且您可以看到导航向下滚动页面，但在向上滚动时不会覆盖网站的标题部分。

Answer 2

我想出了这个。这是试错之一，最终我很幸运。我有一种感觉，我会用CSS解决它。如果有人可以帮我清理jQuery，我会很感激。我觉得它可能比现在更加优化。

我的HTML结构大致如下：

<div id="extra1">
    <div id="extra2"></div>
    <div id="main">Some actual content</div>
</div>
<footer>footer<footer>

我的CSS：

#extra1 {position: relative;}
#extra2 {background: url(../wavesiguess.png) bottom center no-repeat;}

.overlay {position: fixed; z-index: 10; height: 285px; width: 100%; bottom: 0;}
.scrolling {position: absolute; height: 285px; width: 100%; bottom: 0;}

我的jQuery：

$(function() {
    $(window).bind('scroll', function(event) {
        $('footer:in-viewport').each(function() {
            $('#extra2').removeClass('overlay');
            $('#extra2').addClass('scrolling');
            $('footer').addClass('above');
        });
    });

    $(window).bind('scroll', function(event) {
        $('footer.above:below-the-fold').each(function() {
            $('#extra2').addClass('overlay');
            $('#extra2').removeClass('scrolling');
            $('footer').removeClass('above');
        });
    });
});

注意：我的示例页面仍然存在，但由于某些原因它不能正常工作，尽管它在“真实”页面上完美运行。在这个例子中，当魔法发生时会有一点跳跃，可能只是从一些我无法轻易追踪的边缘。

CSS / jQuery：位置元素位于底部，但在页脚进入视口时向上滚动

2 个答案: