我一直试图在另一个前面制作一个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
}
答案 0 :(得分:0)
也许这个?
$(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);
});
});