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非常基本，只需将所有内容放入容器中，然后将导航菜单嵌套在图片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 个答案: