javascript only multiple sticky elements

by wamosjk

HTML

<header>Header</header>
<div class="content">
  <div class="row">
    <div class="col-span-2">Left Div</div>
    <div class="col-span-8">
      <div class="main-content">Main Content</div>
    </div>
    <div class="col-span-2">
      <div class="sticky-container">
        <div class="sticky-box">
          Sticky Box
        </div>
      </div>
      <div class="info">Info Div</div>
      <div class="sticky-container">
        <div class="sticky-box">
          Sticky Box
        </div>
      </div>
      <div class="info">Info Div</div>
      <div class="sticky-container" id="last-sticky-container">
        <div class="sticky-box">
          Sticky Box
        </div>
      </div>
      <div class="info">Info Div</div>
    </div><!--End col-span-2 -->

  
  
  </div><!--End Row-->
</div><!--End Content-->
<footer>Footer</footer>

CSS

body{padding:0;margin:0;}
header, footer{
  background:blue;
  color:#fff;
  padding:20px;
  text-align:center;
}
header{height:200px;}
footer{height:1000px;}
.content {
  max-width: 1080px;
  margin: 0 auto;
}
/*the following is a clearfix for containing floated elements*/
.row:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.col-span-2, .col-span-8{
  float:left;
  min-height:1px;
}
.col-span-2{
  width:20%;
}
.col-span-8{
  width:60%;
}
.sticky-container{
  height:450px;
  position:relative;
}
.fixed .sticky-box{
  position:fixed;
  right:0;
  top:0;
}
.fixedBottom .sticky-box{
  position:absolute;
  top:auto;
  bottom:0;
}

.main-content{height:2350px;background:#333;color:#fff;text-align:center;}
.info{background:#888;height:200px;color:#fff;}
.sticky-box{background:red;height:100px;color:#fff;}

JavaScript

var stickyContainers = document.getElementsByClassName("sticky-container");
function sticky(){
  for(var i = 0; i < stickyContainers.length; i++){
		var stickyContainer = stickyContainers[i];
    if (window.pageYOffset >= stickyContainer.offsetTop){
      stickyContainer.classList.add("fixed");
    }else{
      stickyContainer.classList.remove("fixed");
    }
    if (window.pageYOffset >= stickyContainer.offsetTop + 350){
      stickyContainer.classList.add("fixedBottom");
    }else{
      stickyContainer.classList.remove("fixedBottom");
    }
  }
}
window.onscroll = function() {
  sticky();
}
function createWidth(){
  var boxWidth = document.getElementById("last-sticky-container").offsetWidth;
  var stickyBoxes = document.querySelectorAll(".sticky-box");
  for (var i = 0; i < stickyBoxes.length; i++) {
      stickyBoxes[i].setAttribute("style","width:"+boxWidth+"px;");
  }
}
createWidth();
window.onresize=function(){
  createWidth()
};