Fixed Full Screen Scrolling Effect with jQuery - fixedScroll

fixedScroll is a very small jQuery plugin that implements fixed full page parallax scrolling effect on your single page website / web app. When you scroll down the page, each new content sections slides over the previous one. Also comes with a side navigation which enables you to navigate between these content sections smoothly.

How to use it:

1. Create a set of content sections with a side navigation as follow:

<div class="container">
  <div class="content">
    <nav>
      <a href="#section-one" class="current"></a>
      <a href="#section-two"></a>
      <a href="#section-three"></a>
    </nav>
    <section id="section-one"></section>
    <section id="section-two"></section>
    <section id="section-three"></section>
  </div>
</div>

2. Make the content sections 100% height & 100% width.

html,
body,
.container,
.content,
section {
  height: 100%;
  margin: 0;
  padding: 0;
}

3. Style the side navigation.

.content > nav {
  position: fixed;
  z-index: 9999;
  right: 100px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.content > nav a {
  display: block;
  position: relative;
  height: 50px;
}

.content > nav a:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999;
}

.content > nav a:hover:after { background: rgba(255,255,244,0.6); }

.content > nav a.current:after { background: #000; }

4. The required CSS for the sectioned content.

.content section {
  position: relative;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

5. Load jQuery library and the jQuery fixedScroll plugin at the bottom of the web page.

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/fixedScroll.js"></script>

6. Call the function on the top DIV to initialize the plugin.

$('.container').fixedScroll();

7. Available options.

$('.container').fixedScroll({

// CSS classes
section: '.content > section',
navLink: '.content > nav > a',
activeClass: 'current',

// animation speed
speed: 'slow'

});

---

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