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

【问题标题】：How to center align/center parallax scrolling content?如何居中对齐/居中视差滚动内容？
【发布时间】：2015-04-15 12:43:32
【问题描述】：

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

我无法让#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%;
}

<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>

【问题讨论】：

标签： html css position alignment parallax

【解决方案1】：

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

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

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

在很少的条件下，你可以用导航做同样的把戏

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

See your Example

选项 #2（推荐）：

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

希望我在这里的第一个答案对您有所帮助。

【讨论】：