Responsive jQuery One Page Scrolling Layout with Fixed Background

Fixed Scroll Background is a jQuery plugin for creating responsive and full-screen One Page Scrolling website layout with fixed scrolling background and smooth selection effects. Inspired by codrops's Fixed Background Scrolling Layout.

You might also like:

• jQuery Dynamic One Page Scrolling Plugin - Scrolld.js
• Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
• jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js

Basic Usage:

1. Load the latest jQuery javascript library and jQuery Fixed Scroll Background plugin files on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.debouncedresize.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />

2. Load the other necessary javascript library fiels on the web page.

<script src="js/jquery.easing.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.debouncedresize.js"></script>

3. Markup Html structure.

<div class="container">
<div id="scroller" class="scroller"> </div>
</div>

<div id="mainContent">
...
</div>

4. The javascript.

$(document).ready(function(){
$('body').fixedScroll({
// or provide a list of background images or colors
'backgrounds': [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg'
],
// also specify the number of sections manually with 'numSections'
// 'numSections': 5,
// use 'sectionContent' to override what shows up in each section by default
'sectionContent': '' +
'<div class="contentwrap">' +
'<div class="content">' +
'<header>' +
'<h2>Title</h2>' +
'</header>' +
'<p>...' +
'...</p>' +
'</div>' +
'</div>'
});
// move the display content into the first section
$('#section0 .content').empty()
$('#mainContent').appendTo('#section0 .content');
});

Change log:

Fixed the download link. Thanks to: terryjett

---

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