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