Javascript 使用jquery固定多个元素

我试图在烧焦的同时锁定一些元素，以形成一些东西，我使用Jquery waypoints（）并尝试优化代码以运行几个元素它可以在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>

}

自定义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

                });
            });

---

这里是：

你能提供更多关于为什么它在IE中不起作用的信息吗？你期望发生什么，以及发生了什么会很有帮助。是的，它应该在几个元素（在本例中是矩形图像）到达顶点时通过钉住它们来堆叠它们，以形成另一个图形。当它们达到偏移30时（距顶部30像素）它们的位置被控制以更改为固定。

$(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

                });
            });