2012-07-13 106 views
0

我對JQUERY比較陌生,我正在尋找正確的方向。淡出滾動

如何實現滾動效果淡入淡出?

http://fearthegrizzly.com/http://davegamache.com

理想情況下,我想放下手頭的圖像我想淡出到一個div的選項。如果可能的話。

這可能是值得一提的,我想在Cargo Collective上實現這一點。

謝謝

回答

0

提問提問:不要只是告訴我們你想要什麼。我們不在這裏爲你做你的工作。告訴我們你試過的東西,以便我們幫助解決它。

話雖這麼說,這是一個開始......

當窗口的滾動頂部位置低於20像素更大,它消失一個div出來,當你滾動回來了,它消失回。

$(window).scroll(function(){ 
    if($(window).scrollTop()<20){ 
     $('.fader').stop(true,true).fadeIn("slow"); 
    } else { 
     $('.fader').stop(true,true).fadeOut("slow"); 
    } 
}); 

DEMO

+0

你好 - 對不起我的nOObines。 – Michael 2012-07-13 09:02:57

+0

你好 - 抱歉我的noobines。我忘了提及我試圖http://stackoverflow.com/questions/9438894/how-do-i-fade-a-div-in-out-on-page-scroll但無濟於事。恐怕你的建議不起作用:http://cargocollective.com/btatest。不管怎麼說,還是要謝謝你! – Michael 2012-07-13 09:20:24

16

fearthegrizzly.com使用的CSS()方法。您可以嘗試:

$(window).scroll(function() { 
    $(".header-image").css({ 
    'opacity' : 1-(($(this).scrollTop())/250) 
    });   
}); 

向下滾動250px,屬性完全淡出,反之亦然。

+0

真的很酷,就是我要找的東西(類似於fearthegrizzly)!有沒有增加延遲?所以淡入淡出後200px或%值? – user1406440 2015-01-25 11:32:49