레이아웃을 변경하여 트리거하는 방법은 무엇입니까?

Question

scroll- 오프셋에서 top- 정렬을 얻는 sticked 요소가 있습니다. 문제는, 그 공간이 무료라면 "retriggerd"이 아닌 레이아웃입니다. 그래서 잘 접착 요소는 ...

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

마크 업 유령 -gap은 매우 간단 거기 유지 :

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

뿐만 아니라 JS :

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를 실행하려고 시도했지만 성공하지 못했습니다. 어떤 아이디어, 레이아웃을 다시 트리거하여 자유 간격이 다음 부유 요소로 채워지는 방법?

업데이트

내가 간단한 이미지 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'); 
     } 

    });