jQuery自动淡入div并在滚动时淡出

我对JQuery有点新意，我试图在页面底部加载一个div，当页面加载时，然后当用户开始滚动时，div需要淡出，然后在滚动回到顶部时重新出现。

我为了淡化div而做的代码不起作用，可以在这里看到http://jsfiddle.net/DeZnT/

我正在使用的jQuery是

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

提前感谢您的时间和帮助。

Answer 1

淡入（还有一个相应的fadeOut方法）：

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

第一步是从类中删除display：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); 

这让你中途走了。 我之前没有完成滚动部分。