隐藏其他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用于使事情变得更容易，我的意思是简单地附加事件，快速获取数据并以正确的形式等等。在Windows上的滚动事件中，数据量窗口已滚动并被取消然后背景div被移动那个数量。

Answer 2

是你想要做了什么？ 我已经用codepen覆盖你的代码。 希望它会有所帮助。 codepen.io/jaminpie/pen/Lnjtc