div 앞에 하나의 div 스크롤을 만드시겠습니까?

다른 div 앞에 하나의 div 스크롤을 만들려고했습니다.div 앞에 하나의 div 스크롤을 만드시겠습니까?

그러나 나는 조금 붙어왔다.

#wrapper div는로드시 #header div와 겹칩니다. 심지어 이미지를 볼 수 없습니다 - 나는 숭고한 텍스트 2에 전혀 작동하지 않습니다 전송할 때

여기에, 또한 Fiddle

입니다.

다음은 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

Michael, 동영상 프레임처럼 보이기를 원하십니까? – Stano

아니, 내 의견에 피들처럼 보일 것입니다. 다음과 같이 작동합니다. http://fearthegrizzly.com/ (회색 # 래퍼 div와 같이) 스크롤 할 때 이미지가 겹칩니다. – Michael

div 앞에 하나의 div 스크롤을 만드시겠습니까?

답변

관련 문제