javascript - 用 jquery 固定几个元素

Question

我试图在 scorlling 时制作一些元素以形成某些东西，我正在使用 Jquery 航路点（http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/）并且我尝试优化运行多个元素的代码，它在 Firefox、Chrome 和 Safari 上运行良好，但无法在臭名昭著的 Internet Explorer 上运行。HTML 是这样的：

<div style="height: 300px;">TODO write content</div>
        <div class="container">
            <img src="images/image1.png"/>
            <img src="images/image2.png"/>
            <img  src="images/image3.png"/>
            <img  src="images/image4.png"/>
</div>
<!--This are just for adding some space for the scrolling-->
<div style="height: 300px;">TODO write content</div>
<div style="height: 300px;">TODO write content</div>
<div style="height: 300px;">TODO write content</div>
<div style="height: 300px;">END</div>

CSS：

.my-sticky-element.stuck {
    position:fixed;
    top:0;

}

自定义 JS：

$(document).ready(function() {

            $('.container').find('img').each(function() {
                imgnum+=1
                var $this=$(this);
                var stickyclass="my-sticky-element";
                $this.addClass("my-sticky-element");
                console.log(stickyclass);
                $this.waypoint('sticky', {
                    offset: 30 // Apply "stuck" when element 30px from top

                });
            });

这是：http: //jsfiddle.net/PHr4t/