дисплея Div на основе позиции scrollTop с помощью JQuery

Question

Общей концепции

Как я по-прежнему прокрутите страницу вниз, свойство различной дивы CSS display будет меняться от none к block в зависимости от расстояния прокручивается. Аналогичный пример того, что у меня возникает, можно увидеть here. Когда пользователь прокручивает, кошелек «вращается», который на самом деле просто меняет изображение. Другим примером является here.

Теория дизайна

1. получить scrollTop() число, которое при достижении изменит CSS свойство DIV от display:none к display:block;
2. получить идентификаторы разных div, которые содержат разные изображения.
3. установите для каждого конкретного изображения определенный номер scrollTop(), который, когда он достигнут, включит его настройки дисплея.

Насколько я могу судить, так оно и делается (я не врач, хотя, кто знает).

A Fiddle

JQuery

$(document).ready(function() { 
    function setImage(anImage, contentArea){ 
     $.when(contentArea == $(window).scrollTop()).then(function(){ 
      $(anImage).css('display', 'block'); 
     }); 
    } 
    setImage('#bg1', 200); 
    setImage('#bg2', 300); 
    setImage('#bg3', 400); 
}); 

Моей мысль этого кода была:

Когда значение scrollTop() из anImage (уважаться сОн, содержащего изображения) равна contentArea (scrollTop (), установленное как значение, когда дисплей меняется с одного на блок), затем Значение anImage CSS изменится на display:block. Я не беспокоюсь об удалении предыдущего изображения, потому что новый имеет более высокий индекс z.

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:1500px; 
    z-index:1; 
} 
#bg1{ 
    background:blue; 
    height:400px; 
    width:100%; 
    z-index:2; 
    position:fixed; 
    top:200px; 
    display:none; 
} 
#bg2{ 
    background:green; 
    height:400px; 
    width:100%; 
    z-index:3; 
    position:fixed; 
    top:400px; 
    display:none; 
} 
#bg3{ 
    background:red; 
    height:400px; 
    width:100%; 
    z-index:4; 
    position:fixed; 
    top:400px; 
    display:none; 
} 

Answer 1

так взглянуть на эту скрипку: http://jsfiddle.net/6XweD/2/.

Если вы заметили, я изменил стиль от display:none к opacity:0 так, что функция $(this).height() работы, и я сделал некоторые adjusment на top позиции дивы.

Надеюсь, это прекрасно работает :)