jQuery Plugin For Stacked Scrolling Effect - Stacked Strips

Stacked Strips is a super tiny (2kb) jQuery plugin to create a stacked scrolling effect for your one page scrolling website & single page applications. The plugin has the ability to scroll fixed page sections one by one as you scroll down the webpage.

See also:

• jQuery Plugin To Create Stacked One Page Scrolling Effect - Stackpage
• jQuery Plugin For Stacked Page Scrolling Effect - jQuery Stacks
• Minimalist jQuery Plugin For Scrolling Stack Of Pages - Scroll Deck

How to use it:

1. Load the jQuery Stacked Stripes plugin after you've loaded jQuery library in the document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/jquery.stacked-strips.js"></script>

2. Create a set of content sections for your webpage. Note that the stacked strips plugin requires more than 1 content section to work.

<section>
  Content 1
</section>

<section>
  Content 2
</section>

<section>
  Content 3
</section>

...

3. Add the required CSS styles as shown below to your webpage.

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.unfixed {
  position: relative;
  width: 100%;
}

4. Active the Stacked Scrolling Effect with default options.

$('section').stacked_strips({

  type: 'standard' 

  // start position in pixels.
  active_position: 50,

  // or a pixel value
  strip_size: 'full',

  // add a class to the previous section
  after_class: false,

  // fixed mode
  fixed: true
  
});

Change log:

2017-02-17

• options updated

---

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