堆叠多个粘性页脚

Question

我正在尝试创建多个粘性页脚，一旦滚动到页面底部就会堆叠：所以底部页脚首先出现并粘住，然后另一个出现并位于其上方，然后另一个出现并位于上方等等 我使用了一些Javascript来创建我的第一个粘性页脚，我在网上找到并根据我的需要进行了编辑：

<!-- footer_1 -->
<div>
<img id="footer_1" src="IMAGES/footer_1.png">
</div>

<script>

var footer_1      = document.getElementById("footer_1"),

stop      = footer_1.offsetTop - 400,
docBody   = document.documentElement || document.body.parentNode || 
document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;

window.onscroll = function (e) {
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;

if (scrollTop >= stop) {
footer_1.className = 'stick';
} else {
footer_1.className = ''; 
 }
}

</script>

和我的CSS：

/* footer_1 */

#footer_1 {
width:100%;
margin:1500px 0 0;

z-index: 950;
}

#footer_1.stick {
position:fixed;
top:0; right:0;
width: 100%;
margin:400px 0 0;


z-index: 950;
}

当我尝试复制此代码并创建第二个页脚（将footer_1跨越Javascript和CSS更改为footer_2，并更改页边距以使其到达页面的更高位置）时，它会抛弃我创建的第一个页脚，并停止它来自坚持。

我对编码很陌生，几乎不知道如何设置它！因此，如果有一种更简单的方式来创造我需要的东西而不是我已经做过的东西那么我非常欢迎提出建议。任何帮助将不胜感激！