如何在页面滚动中淡入/淡出div? [英] How do I fade a div in/out on page scroll?

问题描述

这是jsfiddle: http://jsfiddle.net/NKgG9/

Here is the jsfiddle: http://jsfiddle.net/NKgG9/

我基本上是希望这些粉红色的框在页面加载时正常显示，但是一旦用户向下滚动页面，我希望它们淡出并消失.当用户向后滚动到他们的位置或浏览器窗口的顶部时，我希望这些粉红色的框再次淡入.我对JS没用，所以对如何执行此操作有一些帮助.

I'm basically wanting those pink boxes to be on show on page load as normal but as soon as a user scrolls down the page I want them to fade out and disappear. When the user scrolls back up to their position or the top of the browser window I want those pink boxes to fade back in again. I'm useless with JS so good do with some help on how to do this.

感谢所有帮助.

推荐答案

一个非常简单的示例: http://jsfiddle .net/a4FM9/2/

Very simple example: http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​

这篇关于如何在页面滚动中淡入/淡出div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！