我想淡出一個div作爲頁面向下滾動（與頁滾動 - 不只是一個淡出效果）。我調整DIV作爲頁面滾動的不透明度到這裏使用這段代碼：jquery淡出div與頁面滾動

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
     $('.logo_container').css({'opacity':(100-scroll)/100}); 
});

我在這裏的問題是，對我來說淡出太快了，我想一個更微妙的褪色隨着用戶的滾動。任何人都可以想出一個更好的邏輯來做出更慢，更微妙的淡出。

這裏是一個JSFIDDLE顯示

來源

2015-01-11 Sam Skirrow

我做了你的jsfiddle的更新，也許這樣更好？ [JSFiddle]（http://jsfiddle.net/2k3hfwo0/1/） – JiFus

是的，真的很不錯。是什麼讓你使用這些數字 - 或者只是試驗和錯誤？ –

只需要一些試驗和錯誤，稍微調整你的小提琴。 – JiFus

解決方案在行動我的代碼

jQuery的動畫

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    $('.logo_container, .slogan').stop().animate(
     {opacity: ((180-scroll)/100)+0.1}, 
     "slow" 
    ); 
});

溶液B

CSS過渡

.wrapper { 
    height:1000px 
} 
.logo_container { 
    background:red; 
    width:250px; 
    height:500px; 
    position:relative; 
    margin:0px auto; 
    transition: opacity 1s ease; 
}

來源

2015-01-11 18:42:00 Tymek

通過改變部分(1000-scroll)/1000

JSFIDDLE

希望它有助於

來源

2015-01-11 20:01:20

這正常工作與此FIDDLE非常簡單的邏輯提高了解決方案。使用這塊的jquery的，使其工作：

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); 
    var height = $(window).height(); 

    $('.logo_container, .slogan').css({ 
     'opacity': ((height - scrollTop)/height) 
    }); 
});

（高度 - scrollTop的）/身高給出值集合是線性形式1到0

實施例：

height = 430px and scrollTop = 233px。

（高度 - scrollTop）/高度會給不透明度0.45大約。

來源

2015-01-14 05:42:07

這太棒了。 –

如果我不想讓它變爲0或完全淡出，我將如何設置它，因此它只能褪去.3？ – Aaron

試試這個。可能的解決方案之一http://jsfiddle.net/f08z2wgy/ –

jquery淡出div與頁面滾動

回答

解決方案在行動我的代碼

溶液B

相關問題