Question

我使用简单的视差滚动效果但是我遇到了两个问题。

放大和缩小时，我无法让#background保持居中。如果我将位置更改为相对位置，但它需要保持固定以创建视差效果。
#nav容器位于背景上方，如果我完全删除#nav容器，则背景将落在页面底部。我希望#nav栏位于背景之上，最终在本网站创建相同的想法：http://www.falve.co.nz/collection/

以下是我的代码

<div id="page-wrap">
<div id="background"><img src="../images/COVER PHOTO.JPG" width="97%" height="97%"></div>
<nav id="nav">Nav</nav>
<div id="main">"MAIN BODY</div>

CSS

#page-wrap{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto; 
width: 100%;
}


#nav {
margin: 0;
height: 0px;
background: #fff;
position: relative;
}

#main {
margin: 1000px 0 0 0;
height: 1200px;
background: #fff;
position: relative;
}

#background {
position: fixed;
margin: auto;
left: 50px;
width: 98%;
height: 97%;
}

JS

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.stellar.min.js"></script>

<script>$(function() {
$(window).on('scroll', function() {
    $('#background').css('margin-top', $(window).scrollTop() * -.3);
});
});
</script>

Answer 1

选项＃1 （与您的代码相关）：

缺少一些基础知识。例如，关闭页面换行的div。

基本上，您可以为标题设置背景并使用它。

在条件很少的情况下，您可以使用导航

执行相同的操作

if ($(this).scrollTop() > 200) {
    $("#nav").fadeOut();
} else {
    $("#nav").stop().fadeIn();
}

See your Example

选项＃2（推荐）：

我建议使用special plugin（skrollr）来处理视差相关的东西。您可以通过个人支持获得更多选项。还有一个教程部分。

我希望我在这里给你第一个答案。

如何居中对齐/居中视差滚动内容？

1 个答案: