Responsive jQuery One Page Scrolling Layout with Fixed Background

File Size: 791 KB
Views Total: 12406
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

Basic Usage:

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

<script src=""></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 id="mainContent">

4. The javascript.

// or provide a list of background images or colors
'backgrounds': [
// 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>' +
// 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.