Question

我对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;

}

然后，你需要做的就是将底部移到0。

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

这让你中途停下来。我之前没有完成滚动部分。

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

2 个答案: