Fade divs in и out на прокрутке jQuery

Question

У меня есть несколько div, которые по сути являются просто красочными прямоугольниками, которые помогают визуализировать. Когда я прокручиваю страницу вниз, каждый прямоугольник должен fadeIn или fadeOut в зависимости от положения полосы прокрутки. К сожалению, это волнует, и затухание происходит скорее как спастический свет строба. Я думаю, было бы лучше определить уровень непрозрачности тем, насколько далеко вперед, по прокрутке, я прохожу через каждый элемент, но я даже не знаю, с чего начать эту глупость.

Похоже, this guy имел аналогичный вопрос, но ответ не сработал.

FIDDLE

JQuery

$(document).ready(function(){ 
    var $element_array = $("#content").find("div"); 
    $(window).scroll(function(){ 
     $element_array.each (function(){ 
      if (($(this).position().top + $(this).height()) < $(window).scrollTop()) 
       $(this).fadeIn(); 
      if (($(this).position().top + $(this).height()) > $(window).scrollTop()) 
       $(this).fadeOut(); 
     }); 
    }); 
}); 

HTML

<div id="content"> 
    <div id="bg1"></div> 
    <div id="bg2"></div> 
    <div id="bg3"></div> 
</div> 

CSS

html,body{height:100%;margin:0;} 
#content{ 
    background:#333333; 
    height:2000px; 
    z-index:1; 
} 
#bg1{ 
    background:blue; 
    height:400px; 
    width:100%; 
    z-index:2; 
    position:fixed; 
    top:100px; 
    display: none; 
} 
#bg2{ 
    background:green; 
    height:400px; 
    width:100%; 
    z-index:3; 
    position:fixed; 
    top:200px; 
    display: none; 
} 
#bg3{ 
    background:red; 
    height:400px; 
    width:100%; 
    z-index:4; 
    position:fixed; 
    top:300px; 
    display: none; 
} 

Answer 1

У вас есть несколько проблем здесь

Одна проблема проблемы заключается в том, что $(this).position().top возвращается 0 для каждого из дивы (из-за их фиксированный характер). Вам нужно проанализировать фактическое значение css.

Второй в своем классе функции fadeIn() и fadeOut(). Если вы вызовете fadeOut() на элемент, который исчезнет, ​​он будет отставать, если на вашей странице прокрутится агрессивно. Но я не рассматривал этот вопрос ниже.

Я также положил else после первого if, потому что коды кода (должны) быть взаимоисключающими.

$(document).ready(function(){ 
    var $element_array = $("#content").find("div"); 
    $(window).scroll(function(){ 
     $element_array.each (function(){ 
      if ((parseInt($(this).css('top')) + $(this).height()) < $(window).scrollTop()) 
       $(this).fadeIn(); 
      else if ((parseInt($(this).css('top')) + $(this).height()) > $(window).scrollTop()) 
       $(this).fadeOut(); 
     }); 
    }); 
}); 

Answer 2

Обработчик $(window).scroll() выполняется каждый раз, вы щелкаете и прокрутите страницу вниз, так что вы толкаете тонну из fadeIn() и fadeOut() вызовов на jQuery's animation queue. Решение состоит в том, чтобы иметь что-то в if заявлении, что проверка или нет увядает уже происходит, и если да предотвратить добавление другого анимации в очереди, так что-то примерно так:

$(document).ready(function(){ 
    var $element_array = $("#content").find("div"); 
    var fades = 0; 
    $(window).scroll(function(){ 
     $element_array.each (function(){ 
      if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0)) 
       $(this).fadeIn(function(){fades = 1;}); 
      if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0)) 
       $(this).fadeOut(function(){ fades = 0; }); 
     }); 
    }); 
}); 

http://jsfiddle.net/ruXeq/4/

Answer 3

Просто удалите + высота() вещь из условия FADEOUT, потому что не имеет никакого смысла там

$(document).ready(function(){ 
    var remember = 0; 
    var $element_array = $("#content").find("div"); 
    $(window).scroll(function(){ 

     $element_array.each (function(){ 
      if (($(this).position().top+ $(this).height()) < $(window).scrollTop()){ 
       $(this).fadeIn();} 
      if (($(this).position().top) > $(window).scrollTop()) 
       $(this).fadeOut(); 
     }); 

    }); 
}); 

http://jsfiddle.net/ruXeq/5/

, и он будет работать, как ванильная мороженый