jQuery sticky div misbehaving
<p>I'm using a bit of code to keep a sidebar element in view (and within the bounds of its parent) while scrolling and am having a bit of a problem. I have multiple articles on a page (approximately 10), each with it's own sidebar. The markup looks like this:</p>

<pre><code>&lt;article&gt;
    &lt;section class="project-details entry-content"&gt;
        &lt;header&gt;
            ...
        &lt;/header&gt;
    &lt;/section&gt;
    &lt;section class="offset-by-four twelve columns"&gt;
        ...
    &lt;/section&gt;
&lt;/article&gt;
</code></pre>

<p>And the CSS:</p>

<pre><code>article {
    padding-top: 2em;
    position: relative; }
article .project-details {
    margin: 0 10px;
    position: absolute;
    width: 220px; }
</code></pre>

<p>... and finally, the Javascript:</p>

<pre><code>$.fn.persistent = function(options) {
    var opts = $.extend({
        duration: 0,
        lockBottom: true
    },
    options),
    elements = [];

    this.each(function() {
        var parentPaddingTop = parseInt($(this).parent().css('paddingTop'));
        $(this).data({
            'parentPaddingTop': parentPaddingTop,
            'startOffset': $(this).parent().offset().top
        }).css({
            position: 'absolute'
        });
        if (opts.lockBottom) {
            var bottomPos = $(this).parent().height() - $(this).height() + parentPaddingTop;
            if (bottomPos &lt; 0) {
                bottomPos = 0;
            }
            $(this).data('bottomPos', bottomPos);
        }
        elements.push($(this));
    });
    $(window).scroll(function() {
        var pastStartOffset = $(document).scrollTop() &gt; opts.startOffset;
        $.each(elements,
            function() {
                var parentPaddingTop = $(this).data('parentPaddingTop'),
                    startOffset = $(this).data('startOffset'),
                    bottomPos = $(this).data('bottomPos');
                $(this).stop();
                var objFartherThanTopPos = $(this).offset().top &gt; startOffset,
                    objBiggerThanWindow = $(this).outerHeight() &lt; $(window).height();
                if ((pastStartOffset || objFartherThanTopPos) &amp;&amp; objBiggerThanWindow) {
                    var newpos = ($(document).scrollTop() - startOffset + parentPaddingTop);
                    if (newpos &gt; bottomPos) {
                        newpos = bottomPos;
                    }
                    if ($(document).scrollTop() &lt; startOffset) {
                        newpos = parentPaddingTop;
                    }
                    $(this).animate({
                        top: newpos
                    }, opts.duration);
                }
            }
        );
    });
};
</code></pre>

<p>It's the <code>.project-details</code> DIV that should remain sticky, but for some reason only the first one on the page works and the rest do nothing. Occasionally the second will start to work while scrolling down the page and then will fail about halfway through.</p>

<p>Can anyone see any glaring flaws with this code that might cause such behavior?</p>
