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); 

，让你中途。我以前没做过滚动部分。