我一直在尝试让一个 div 在另一个之前滚动。
但是，我有点卡住了。
#wrapper div 在加载时与#header div 重叠。
这是一个 Fiddle
此外，当我将它传输到 Sublime Text 2 时，它根本不起作用——我什至看不到图像。
这是我在 ST2 中看到的内容。
HTML:
<!DOCTYPE HTML>
<html lang="en-UK">
<head>
<link rel="stylesheet" type="text/css" href="DivTest.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var header_w=$('#header').height();
$('#wrapper').css('margin-top',header_w+'px');
$(window).resize(function()
{
header_w=$('#header').height();
$('#wrapper').css('margin-top',header_w+'px');
});
</script>
<title></title>
</head>
<body>
<div id="header">
<img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
</div>
<div id="wrapper">
<div id="outer">
<div id="content"></div>
</div></div>
</body>
</html>
CSS
html,
body
{
margin:0;
width:100%;
}
#header
{
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
background-size:100%;
}
#header img
{
width:100%;
display:block;
z-index:99;
}
#wrapper
{
width:100%;
background-color:lightgrey;
z-index:100;
position:absolute;
}
#outer
{
margin:30px auto;
padding-top:20px;
position:relative;
width:90%;
height:1500px;
background-color:red;
}
#inner
{
margin:0 auto;
width:200px;
height:250px;
background-color:lightblue;
top:20px
}
最佳答案
也许是这个？
$(document).ready(function() {
var header_h = $('#header').height();
$('#wrapper').css('margin-top', header_h + 'px');
$(window).scroll(function() {
var header = $('#header');
var opac = Math.max(0, 1 - $(window).scrollTop() / header.height());
header.css('opacity', opac);
});
});
关于jquery - 使一个 div 滚动到另一个 div 的前面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11948803/