Fixed Sidebar

by fparent

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget ante ac libero commodo tincidunt vitae non nisl. Phasellus in massa ac ante ullamcorper scelerisque sed a odio. Nulla eleifend, mauris vel ornare commodo, diam quam condimentum enim, accumsan finibus quam arcu ut sem. Nam porta nunc nulla, non iaculis diam convallis eget. Pellentesque dictum semper nibh, eget congue turpis dignissim finibus. Ut a tellus faucibus, vestibulum eros ut, congue ipsum. Praesent purus mauris, imperdiet non consectetur ut, viverra a dui. Vivamus ipsum sapien, pharetra maximus pretium aliquet, vulputate et metus.</p>

<p>Praesent metus mi, mollis nec mauris ut, iaculis faucibus ante. Duis varius condimentum commodo. Fusce pulvinar malesuada diam, in luctus neque luctus eu. Proin eu ligula vel nisi tincidunt luctus at et nulla. Mauris placerat lacinia diam, a elementum urna pulvinar quis. Integer at erat efficitur, accumsan ligula eu, faucibus odio. Phasellus laoreet, nulla non laoreet tristique, eros tellus aliquam nibh, vel rutrum augue ante sodales risus. Proin ac neque mollis, lacinia ex sit amet, posuere velit. Vivamus tincidunt aliquet libero sed euismod.</p>

<p>Curabitur pulvinar felis vitae lectus vulputate tincidunt. Aenean mattis, velit eu eleifend gravida, quam lorem ornare lectus, a auctor turpis mauris iaculis ipsum. Donec a commodo metus. Vivamus eget ipsum eget elit fermentum rutrum. Vivamus tellus urna, cursus nec purus at, accumsan ornare nibh. Aliquam quis tempor elit. Nullam ut accumsan leo. Curabitur egestas convallis mi eu condimentum. Vivamus lacinia dolor nisi, at pretium urna efficitur sit amet.</p>

<p>In at urna eu eros pharetra pellentesque. Praesent egestas massa sed nisi semper cursus. Class aptent taciti sociosqu ad...

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  width: 800px;
  min-height: 600px;
  margin-bottom: 100px;
  position: relative;
}

.content {
  width: 600px;
  padding: 0 20px;
}

.sidebar {
  width: 200px;
  padding: 0 20px;
  position: absolute;
  top: 0;
  right: 0;

  transition-property: top;
  transition-duration: 0;
}

.other-section {
  heigth: 400px;
  background-color: red;
}

JavaScript

var $sidebar = $( '.sidebar' );
var sidebard_height = $sidebar.height();
var $window = $( window );

var scrollVar = 0;
var should_scroll = true;

$window.scroll( function() {
    if ( !should_scroll ) return;
    
    scrollVar = $window.scrollTop();
    
    $sidebar.css({
      'top': scrollVar
    });
});

$( '.other-section' ).waypoint({
  handler: function(direction) {
		if ( direction === 'down' ) {
    	should_scroll = false;
    } else {
    	should_scroll = true;
    }	
  }, offset: sidebard_height
});