jQuery自動淡入div和滾動淡出

Question

我是一個新的JQuery，我試圖讓頁面底部的淡入淡出當頁面加載，然後當用戶開始滾動div需要淡出，然後在滾動回頂端時重新出現。

我已經做到了淡入不工作，可以在這裏看到http://jsfiddle.net/DeZnT/

jQuery的，我使用div的代碼是

$(document).ready(function() { 
    $(function(){ 
     $(".other_product_links").animate({bottom:'0px'}); 
     }); 
}); 

預先感謝您的時間和幫助。

Answer 1

淡入（還有一個相應的淡出方法）：

$("#element").fadeIn(300); 

爲了檢測多遠下來用戶滾動，你可以使用這樣的事情：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var posFromTop = $(window).scrollTop(); 

     if(posFromTop > 200){ 
     // if more than 200px from the top do something 


     } else { 
     // otherwise do something else. 

     } 
    }); 
}); 

Answer 2

第一步是從你的班級中刪除顯示：none，並設置底部位置在頁面下方（0減去div高度）開始。

.other_product_links { 
    height: 200px; 
    width:100%; 
    opacity: 0.8; 
    background: #ffd6fd; 
    border-top: 2px solid #f095d9; 
    position: fixed; 
    bottom: -200px; 

}

然後，你的jQuery需要做的全部是移動的底部爲0

$(".other_product_links").animate({bottom: '0px'}, 1000); 

，讓你中途。我以前沒做過滾動部分。