如何居中 align/center 视差滚动内容？

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（与您的代码相关）：

缺少一些基础知识。例如关闭 page-wrap 的 div。

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

在很少的情况下，您可以使用导航来实现同样的技巧

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

See your Example

选项 #2（推荐）：

我建议使用 special plugin (skrollr) 来处理视差相关的内容。借助 individual 支持，您可以使用更多选项做更多事情。还有一个教程部分。

希望我的第一个回答对您有所帮助。

如何居中 align/center 视差滚动内容？

How to center align/center parallax scrolling content?

html

css

position

alignment

parallax