隱藏其他div下的固定定位div（視差）

我試圖在頁面的一部分內部設置視差效果div，麻煩的是我難以定位，所以它只顯示在父級部分（下面的代碼中的id'foo'）。我怎樣才能做到這一點？隱藏其他div下的固定定位div（視差）

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%; 
}

$(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

來源

2014-09-10 user4027756

演示：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被移動那個數量。

來源

2014-09-10 18:03:20

是你想要做了什麼？我已經用codepen覆蓋你的代碼。希望它會有所幫助。 codepen.io/jaminpie/pen/Lnjtc

來源

2014-09-10 17:02:42 jamjamlong

不完全。我希望div具有那個位置（div覆蓋和低於重疊），但我希望它以與窗口不同的速度滾動（視差效果）。 – user4027756 2014-09-10 17:06:03

隱藏其他div下的固定定位div（視差）

回答

相關問題