Parallax-like Scrolling Effect For Two-Column Layout - Differential Scroll

Differential Scroll is a fancy jQuery plugin that applies a parallax-style scrolling effect to your two-column layout.

Suppose you have a two-column layout containing images and corresponding descriptions, the plugin sticks the description column to the top when scrolling down the page unit you reach the bottom of the image column.

How to use it:

1. Create a two-column layout with the following CSS classes. Note that at least one column is taller than the screen height.

<div class="differential-scroll-container">
  <div class="differential-scroll-column">
    Left Column
  </div>
  <div class="differential-scroll-column">
    Right Column
  </div>
</div>

2. The necessary CSS styles for the two-column layout.

.differential-scroll-container {
  position: relative;
  overflow: hidden;
}

.differential-scroll-column{
  width: 50%;
  float: left;
}

3. Load jQuery library and the Differential Scroll plugin at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery.differential-scroll.js"></script>

4. Apply the plugin to the two-column layout and done.

$(function(){
  $('.differential-scroll-container').differentialScroll();
});

5. Disable the plugin if the screen size is smaller than a specific breakpoint (Eg. mobile device).

$(function(){
  $('.differential-scroll-container').differentialScroll({
    breakpoint: '(min-width: 40em)'
  });
});

6. Determine the top and bottom offsets of the sticky column. Useful if you have a sticky header or footer on the page.

$(function(){
  $('.differential-scroll-container').differentialScroll({
    offsetTop: 0,
    offsetBottom: 0
  });
});

---

This awesome jQuery plugin is developed by timbakkum. For more Advanced Usages, please check the demo page or visit the official website.