<!DOCTYPE html>
<style>
.scroller {
background-color: red;
border: 1px solid black;
width: 200px;
height: 200px;
margin-top: 10px;
outline: 2px solid black;
overflow: hidden; /* hide scrollbars */
}
.sticky {
background-color: green;
display: inline-block;
margin-top: 200px;
position: sticky;
top: 0px;
width: 200px;
height: 200px;
}
</style>
<script>
function doTest()
{
var stickyObjects = document.querySelectorAll('.sticky');
for (var i = 0; i < stickyObjects.length; i++) {
stickyObjects[i].style.marginTop = '0';
}
}
window.addEventListener('load', doTest, false);
</script>
<div class="scroller">
<div class="sticky"></div>
</div>
<div class="scroller">
<div>
<div class="sticky"></div>
</div>
</div>