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

Question

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

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

但实际上，此页脚是下一个滑动页的页眉，在滚动时将在全屏图片的顶部滑动。

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

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

这是一个显示此效果的网站示例： 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。

谢谢。

Answer 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实际上是基本的，只是将所有内容都放入一个容器中，然后将导航菜单嵌套在picture 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/

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