I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While I know I can manually add the pixel value separately, I find this method to be unclean.
JS
$(".sticky-container").css({'height':($(".content").outerHeight(false)+'px')});
HTML
<div class="filler">Scroll down</div>
<div class="sticky-container">
<div class="content">Bacon ipsum dolor amet shankle pancetta bacon beef ribs shank strip steak beef andouille brisket ground round drumstick frankfurter... // (remaining long text is truncated for brevity)
...pasta capicola. Chuck venison ball tip boudin capicola t-bone ham hock sirloin pork. Meatloaf t-bone pancetta cupim cow shankle drumstick pork chop corned beef strip steak.</div>
<div class="sticky-stuff"></div>
</div>
<div class="filler"></div>
html
html,body{
height: 100%;
margin: 0px;
padding: 0px;
}
.filler{
height:100%;
background: green;
width: 100%;
}
.sticky-container{
position: relative;
height:100%;
width:100%;
}
.content{
width: 400px;
position: absolute;
top: 0;
left: 0;
z-index:1;
background:white;
margin: 50px;
}
.sticky-stuff{
background: url(http://i.imgur.com/yT65RYM.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}