jQuery Plugin For Fixed Background Scrolling Layout

File Size: 81.6 KB
Views Total: 5892
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Fixed Background Scrolling Layout

A simple and clean plugin integrated with jQuery easing and waypoints plugin that allows you to create a fullscreen scrolling layout with fixed background using jQuery and CSS3. 

How to use it:

1. Markup Html Structure

<div id="cbp-fbscroller" class="cbp-fbscroller">

<a href="#fbsection1" class="cbp-fbcurrent">Section 1</a> 
<a href="#fbsection2">Section 2</a> 
<a href="#fbsection3">Section 3</a> 
<a href="#fbsection4">Section 4</a> 
<a href="#fbsection5">Section 5</a> 

<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>


2. The CSS

html, body, .container, .cbp-fbscroller, .cbp-fbscroller section {
height: 100%;
.cbp-fbscroller > 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%);
.cbp-fbscroller > nav a {
display: block;
position: relative;
color: transparent;
height: 50px;
.cbp-fbscroller > nav a:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
border: 4px solid #fff;
.cbp-fbscroller > nav a:hover:after {
background: rgba(255,255,255,0.6);
.cbp-fbscroller > nav a.cbp-fbcurrent:after {
background: #fff;
/* background-attachment does the trick */
.cbp-fbscroller section {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#fbsection1 {
background-image: url(../images/1.jpg);
#fbsection2 {
background-image: url(../images/2.jpg);
#fbsection3 {
background-image: url(../images/3.jpg);
#fbsection4 {
background-image: url(../images/4.jpg);
#fbsection5 {
background-image: url(../images/5.jpg);

3. Include necessary javascript files on the page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery.easing.min.js"></script> 
<script src="js/waypoints.min.js"></script> 
<script src="js/jquery.debouncedresize.js"></script> 
<script src="js/cbpFixedScrollLayout.min.js"></script> 

4. Initialize the plugin

$(function() {

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