Question

关于：

使用jQuery完成了一个非常基本的Parallax Scrolling效果教程。效果会起到应有的作用。

我的问题：

当第一次以一定像素数查看页面时，内容已经与背景图像重叠。这需要从视口下方开始（因此，背景图像）。

我的问题：我需要更改（或添加）以使其从背景图像下方开始？

我尝试解决：

尝试将100％的固定高度设置为背景，以使内容部分从视线开始（在背景图像下方）。这删除了我的整体背景，并将内容进一步向上推。
尝试将.content高度从1500px更改为更低或更高。不幸的是，这并不理想。
尝试将.parallax-bg填充从300px更改为更高，以便将内容降低。它有效，但我不确定这是否适用于不同的分辨率。

我的编码：

(function() {
    var documentEl = $(document),
        parallaxBg = $('div.parallax-bg');
	
    documentEl.on('scroll', function() {
    	var currScrollPos = documentEl.scrollTop();
    	parallaxBg.css('background-position', '0 ' + -currScrollPos/4 + 'px');
    });
})();

html, body  {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}

.content {
	height:1500px;
	background-color:#333;
}

.parallax-bg {
	padding:300px 0;
	background-image:url('/img/bg.png');
	background-size:cover;
	background-attachment:fixed;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	transition:all 0.2s ease;
}

.parallax-bg h1 {
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	font-size:70px;
	font-family:arial:
}

<!doctype html>
	<html>
		<head>
			<title></title>
				<link rel="stylesheet" type="text/css" href="css/style.css">
		</head>
		<body>
			<div class="content">
				<div class="parallax-bg">
					<h1>Hello Everybody</h1>
				</div>
			</div>

			<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
			<script type="text/javascript" src="js/scrolling.js"></script>
		</body>
	</html>

使用Parallax Scroll效果重叠内容

0 个答案: