页脚变为页眉的jQuery css视差效果答案

【问题标题】：jQuery css parallax effect where footer becomes header页脚变为页眉的jQuery css视差效果
【发布时间】：2014-03-09 19:05:40
【问题描述】：

我想知道如何使用 css 或 jquery 实现这种视差效果：

当打开网页时，我们只能看到两件事：（几乎）全屏图片和一个 100 像素高的页脚，贴在底部下方（无论窗口的尺寸如何，此页脚始终可见）。

但实际上，这个页脚是下一个滑动页面的页眉，在滚动时会在全屏图片之上滑动。

最难的部分在这里：无论第二个“页面/面板”的高度如何，当移动的页眉到达页面顶部时，它将保持固定，从那里开始，唯一会移动的是其余部分第二个“页面”。

我不要求任何人为我做我的工作，但是解释起来太复杂了，很难在网上找到一个特定的资源来告诉我如何做（教程等）。有很多视差教程，但他们没有解释如何实现这种页脚/页眉，而有很多网站使用这种技术。

以下是展示此效果的网站示例： http://themify.me/demo/themes/parallax/

有人能和蔼可亲，带领我走向正确的方向吗？

编辑：这是我到目前为止得到的：

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="jquery.min.js"></script>
<script src="waypoints.js"></script>
<script src="waypoints-sticky.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.sticky-navigation').waypoint('sticky');
    });
</script>

<style>

body
{
    padding:0px;
    margin:0px;
}
.container
{
    width: 100%;
    margin: 0 auto;
    background-color: blue;
}

.picture_part
{
    height:300px;
    background-color: green;
}

.sticky-navigation
{
    height:100px;
    background: red;
    width: 100%;
}

.sticky-navigation.stuck
{
    position: fixed;
    top: 0;
}
    </style>

</head>

<body>

<div class="container">

    <div class="picture_part"></div>

    <div class="sticky-navigation"> </div>

    <div>
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />

    </div>

</div>

但它是为了显示一些东西，因为它不能解决任何问题，因为：

1）“页眉/页脚”没有卡在底部开始

2) “页眉/页脚”不是第二个“视差”面板的一部分。它只是主页中的一个 div。

谢谢。

【问题讨论】：

这里不能例外，很抱歉。你至少应该给我们一些你尝试过的东西。
我觉得不是很复杂...它是一个相对位置，直到窗口滚动到某个点，然后它就固定了。
这是一个开始，谢谢乍得

标签： jquery css parallax

【解决方案1】：

基本上只需将页脚贴在页面底部并计算页面高度。然后当用户至少滚动了这么多时，将其附加到顶部。

jQuery

$(document).ready(function () {
    // Initialize variable
    var windowHeight = $('#picture-part').height();

    $(window).scroll(function() {
        windowHeight = $('#picture-part').height();

        if ($(this).scrollTop() > windowHeight) {
            $('#sticky-navigation').addClass('sticky-navigation-fixed');
            $('#sticky-navigation').removeClass('sticky-navigation-bottom');
        } else {
            $('#sticky-navigation').removeClass('sticky-navigation-fixed');
            $('#sticky-navigation').addClass('sticky-navigation-bottom');
        };
    });
});

HTML

所以 HTML 是非常基本的，只需将所有内容都放入容器中，然后将导航菜单嵌套在图片 div 中。这允许导航菜单的绝对定位，直到所需的滚动高度。

<div id="container">
    <div id="picture-part">
        <div id="sticky-navigation" class="sticky-navigation-bottom"></div>
    </div>
</div>

CSS

#picture-part {
    position: relative;
    height: 100%;
}

#sticky-navigation {
}

.sticky-navigation-bottom {
    position:absolute;
    bottom:0;
}

.sticky-navigation-fixed {
    position: fixed;
    top:0;
}

小提琴：http://jsfiddle.net/B62R3/

【讨论】：