讓一個div在另一個前面滾動？

但是，我已經有點卡住了。

#wrapper div，負載時與#header div重疊。

這裏有一個Fiddle

此外，當我轉移，爲崇高的文本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 
}

來源

2012-08-14 Michael

所以也許這？

$(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); 
    }); 
});

和the fiddle

來源

2012-08-14 09:01:46 Stano

即完全消除圖像。它應該看起來像這樣在頁面加載：http://jsfiddle.net/MichaelT/9MFDB/ – Michael 2012-08-14 09:11:56

邁克爾，你想它看起來像一個電影框架？ – Stano 2012-08-14 09:15:17

不，它應該看起來像我的評論中的小提琴。並且行爲如下：http://fearthegrizzly.com/（如灰色的#wrapper div）與scroll上的圖像重疊 – Michael 2012-08-14 09:20:56

讓一個div在另一個前面滾動？

回答

相關問題