다른 div 아래 고정 위치 지정 div (시차) 숨기기

Question

페이지의 섹션 안에 시차 효과 div를 설정하려고하는데 문제가 발생하여 위치가 어려워서 부모에만 표시됩니다. 섹션 (아래 코드에서 id 'foo')을 참조하십시오. 어떻게해야합니까?

HTML

<section> 
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 

</section> 

<article id="foo"> 
    <div id="parallax"></div> 
</article> 

<section> 
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 

</section> 

CSS

#parallax { 
    background: url('http://lorempixel.com/output/cats-q-c-220-129-8.jpg') transparent no-repeat; 
    width:100%; 
    height:200px; 
    z-index: 20; 
    right: -73%; 
    position: fixed; 
} 

article { 
    height: 200px; 
    background-color: aliceblue; 
} 

section { 
    background-color: black; 
    color: white; 
    padding: 1%; 
} 

JS

$(window).scroll(function(){ 

function parallax(){ 

if($(window).scrollTop() < $('#foo').offset().top){ 

var parallaxLayer = document.getElementById('parallax'); 
parallaxLayer.style.top = ((window.pageYOffset/4) - 400)+'px'; 
}else{ 

} 

} 
window.addEventListener("scroll", parallax, false); 
}); 

http://codepen.io/anon/pen/Ksahn

Answer 1

데모 :http://jsfiddle.net/fdg9du90/show/

코드 :http://jsfiddle.net/fdg9du90/

var w=$(window), bg = $('.bg'); 

w.scroll(function(e){ 
    bg.css('top','-'+w.scrollTop()*.5+'px'); 
}); 

설명 :

배경 이미지/div는 고정으로 설정되어 있습니다. jquery는 이벤트를 쉽게 첨부하고, 데이터를 신속하게 올바른 형식으로 가져 오는 것을 의미합니다. 창에서의 스크롤 이벤트에서 데이터 양 창이 스크롤되고 반은됩니다. 그런 다음 백그라운드 div가 해당 양만큼 이동합니다.

Answer 2

은 당신이 한 싶은인가요? codepen에서 코드를 덮어 썼습니다. 도움이되기를 바랍니다. codepen.io/jaminpie/pen/Lnjtc