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

Posted 2023-03-05

【中文标题】如何居中对齐/居中视差滚动内容？

【英文标题】：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"  ></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>

【参考方案1】：

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

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

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

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

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

See your Example

选项 #2（推荐）：

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

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