Conditionally Fixed DIV Based on Window Size

by gtowle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://socialsentinel.com/assets/js/scrollmagic/jquery.scrollmagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<div class="sidebar" id="sidebar-pin"></div>
<div class="mainbar"></div>

CSS

.sidebar {
  background-color:red;
  width:10%;
  height:100px;
}
.mainbar {
  background-color: blue;
  width:90%;
  height: 900px;
  margin-left: 10px;
}

JavaScript

var controller = new ScrollMagic();

var w = $(window).width();
if(w >= 500) {
	var sidebar = new ScrollScene()
		.triggerHook("0")
		.setPin("#sidebar-pin")
		.addTo(controller);   
}
$(window).on('resize',function(){
	if(w < 500) {
			controller.removePin("#sidebar-pin",true);
	} else {
	var sidebar = new ScrollScene()
		.triggerHook("0")
		.setPin("#sidebar-pin")
		.addTo(controller); 
  }
});