Как вызвать макет для изменения?

Question

У меня есть элемент sticked, который получает top -определение от текущего scroll -offset. Проблема в том, что макет не «retriggerd» если пространство от него бесплатное. Так что остается призрак зонных где наклеить элемент был ...

http://fiddle.jshell.net/pPc4V/

Разметка довольно просто:

<a href="#"></a> 
<a href="#"></a> 
<a href="#"></a> 
<a href="#"></a> 
<a href="#" class="sticked"></a> 
<a href="#"></a> 
... 

, а также ЯШ:

var $win = $(this); 
var sticked = document.querySelector('a.sticked'); 

$win.on('scroll', function() { 
    var scrollTop = $win.scrollTop(); 
    sticked.style.top = scrollTop + 'px'; 

    // $win.resize(); 
}); 

... и css хорошо выглядит до сих пор:

a { 
    display: inline-block; 
    width: 90px; 
    height: 90px; 
    background: deepskyblue; 
} 

.sticked { 
    position: relative; 
    top: 0; 
    left: 0; 
    background: tomato; 
} 

Я попытался вызвать resize -event на прокрутке (как вы видите выше, без ранения), но без успеха! Любые идеи, как перезапустить макет, чтобы свободный пробел был заполнен следующим плавающим элементом?

Update

Чтобы пояснить, что я имею в виду, я сделал простой образ-timelime:

Шаг 1

Шаг 2

Шаг 3

Answer 1

Проблема в том, что вы устанавливаете позицию, зафиксированную на элементе, который отображается в строке. Это вызовет возникновение этого пространства. Я изменил ваш jsFiddle с правильным выравниванием.

Чтобы исправить это, я добавил класс «застрял», только когда положение scrollTop документа больше, чем позиция scrollTop вашего целевого элемента.

jsFiddle: http://fiddle.jshell.net/pPc4V/44/

HMTL:

<div id="grid"> 
    <a href="#"></a> 
    <a href="#"></a> 
    etc... 
</div> 

CSS:

#grid { 
    height:1000px; 
    overflow:hidden; 
    float:left 
} 
#grid > a { 
    display: inline-block; 
    width: 90px; 
    height: 90px; 
    background: deepskyblue; 
} 
.stuck { 
    position: fixed; 
    background: navy !important; 

} 

JS:

$(window).on('scroll', function() { 

     var $doc = $(document), 
      parentElement = $('#grid'), 
      childToGetStuck = parentElement.find('a:nth-child(5)'); 

     if ($doc.scrollTop() > childToGetStuck.scrollTop()) { 
      childToGetStuck.addClass('stuck'); 
      //console.log($('.stuck').scrollTop()) 
     } else { 
      childToGetStuck.removeClass('stuck'); 
     } 

    });