javascript - 在其他 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 移动该数量。