jQuery CSS视差效果，其中页脚变为页眉

Question

I would like to know how I could achieve this parallax effect with either css or jquery: 我想知道如何使用css或jquery实现此视差效果：

When opening the web page, we can see 2 things only: an (almost) fullscreen picture and a footer of a 100px high sticking below, at the bottom (whatever the window's dimension, this footer is always visible). 打开网页时，我们只能看到两件事：（几乎）全屏图片和底部底部贴有100px高的页脚（无论窗口的尺寸如何，此页脚始终可见）。

But in fact, this footer is the next sliding page's header that will slide on top of the fullscreen picture while scrolling. 但实际上，此页脚是下一个滑动页的页眉，在滚动时将在全屏图片的顶部滑动。

The hardest part is here: whatever the height of that second "page/panel", when the moving header reaches the top of the page, it will remain fixed and from there, the only thing that will move is the rest of that second "page". 最困难的部分是：无论第二个“页面/面板”的高度如何，当移动的页眉到达页面顶部时，它将保持固定，从那里开始，唯一可以移动的是第二秒的其余部分”页”。

I don't ask anyone to do my work for me but it's too complicated to explain so, it's hard to find a specific ressource online that will tell me how to do that (tutorials, etc..). 我不要求任何人为我做我的工作，但是解释起来太复杂了，很难在网上找到可以告诉我如何做的特定资源（教程等）。 There are plenty of parallax tutorials but they don't explain how to achieve this footer/header thing while there are a lot of websites using this technique. 有很多视差教程，但是当有许多网站使用此技术时，它们没有解释如何实现页脚/页眉。

Here is an example of a website that show this effect: http://themify.me/demo/themes/parallax/ 这是一个显示此效果的网站示例： http : //themify.me/demo/themes/parallax/

Can someone be nice and lead me to the right direction? 有人可以很好地引导我朝正确的方向发展吗？

EDIT: here's what I got so far: 编辑：这是到目前为止我得到的：

<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>

But it's to show something as it doesn't resolve anything because: 但这是为了显示某些内容，因为它无法解决任何问题，因为：

1) the "header/footer" is not stuck at the bottom to begin with 1）首先，“页眉/页脚”未卡在底部

2) the "header/footer" is not part of a second "parallaxes" panel. 2）“页眉/页脚”不是第二个“视差”面板的一部分。 It's just a div within the main page. 它只是主页上的一个div。

Thanks. 谢谢。

Answer 1

Basically just stick the footer on the bottom of the page and calculate the page height. 基本上只是将页脚放在页面底部，然后计算页面高度。 Then when the user has scrolled at least that much, attach it to the top. 然后，当用户至少滚动了这么多滚动时，将其附加到顶部。

jQuery 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

So the HTML is really basic, just toss everything in to a container, then nest the nav menu in the picture div. 因此，HTML实际上是基本的，只是将所有内容都放入一个容器中，然后将导航菜单嵌套在picture div中。 This allows absolute positioning for the nav menu until the desired scroll height. 这允许导航菜单的绝对定位，直到所需的滚动高度。

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

CSS CSS

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

#sticky-navigation {
}

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

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

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

jQuery CSS视差效果，其中页脚变为页眉

问题描述

1 个解决方案

解决方案1
2 2014-03-09 20:35:40

jQuery CSS视差效果，其中页脚变为页眉

问题描述

1 个解决方案

解决方案1 2 2014-03-09 20:35:40

解决方案1
2 2014-03-09 20:35:40