I have an element that sticks to the top based on the current scroll offset. The issue is that the layout doesn't update when there is space available after the stuck element. This creates a ghost gap where the stuck element used to be...
http://fiddle.jshell.net/pPc4V/
The HTML markup is quite simple:
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="sticked"></a>
<a href="#"></a>
...
And here is the JavaScript code:
var $win = $(this);
var sticked = document.querySelector('a.sticked');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
sticked.style.top = scrollTop + 'px';
// $win.resize();
});
...and the CSS styling is as follows:
a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.sticked {
position: relative;
top: 0;
left: 0;
background: tomato;
}
I attempted triggering the resize event on scroll (uncommented in the code), but it didn't work! Any suggestions on how to refresh the layout so that the empty space is filled by the next floated element?
Update
To illustrate my point, I created a simple image timeline:
Step 1
Step 2
Step 3