Fixed Background Scrolling Layout

A fixed background image scrolling layout with 100% height panels and smooth scrolling.

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section.


<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>


/* Set all parents to full height */
html, body, 
.cbp-fbscroller section { 
	height: 100%; 

/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.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);

The JavaScript

 * cbpFixedScrollLayout.js v1.0.0
 * Licensed under the MIT license.
 * Copyright 2013, Codrops
var cbpFixedScrollLayout = (function() {

	// cache and initialize some values
	var config = {
		// the cbp-fbscroller´s sections
		$sections : $( '#cbp-fbscroller > section' ),
		// the navigation links
		$navlinks : $( '#cbp-fbscroller > nav:first > a' ),
		// index of current link / section
		currentLink : 0,
		// the body element
		$body : $( 'html, body' ),
		// the body animation speed
		animspeed : 650,
		// the body animation easing (jquery easing)
		animeasing : 'easeInOutExpo'

	function init() {

		// click on a navigation link: the body is scrolled to the position of the respective section
		config.$navlinks.on( 'click', function() {
			scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
			return false;
		} );

		// 2 waypoints defined:
		// First one when we scroll down: the current navigation link gets updated. 
		// A `new section´ is reached when it occupies more than 70% of the viewport
		// Second one when we scroll up: the current navigation link gets updated. 
		// A `new section´ is reached when it occupies more than 70% of the viewport
		config.$sections.waypoint( function( direction ) {
			if( direction === 'down' ) { changeNav( $( this ) ); }
		}, { offset: '30%' } ).waypoint( function( direction ) {
			if( direction === 'up' ) { changeNav( $( this ) ); }
		}, { offset: '-30%' } );

		// on window resize: the body is scrolled to the position of the current section
		$( window ).on( 'debouncedresize', function() {
			scrollAnim( config.$sections.eq( config.currentLink ).offset().top );
		} );

	// update the current navigation link
	function changeNav( $section ) {
		config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' );
		config.currentLink = $section.index( 'section' );
		config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' );

	// function to scroll / animate the body
	function scrollAnim( top ) {
		config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );

	return { init : init };


Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 36

Comments are closed.
  1. Is there a way to make ‘previous and next’ buttons instead of the bullets (for when there a many pages/sections)?


  3. Hi, I came across your post while looking for a fixed background one page website & your tutorial is great! What I would like to know but have not come across yet is, how can we make the background totally static? meaning to say the bird background does not move as you scroll through & the other pages are maybe enclosed with a DIV that has a transparent background? I ask this as I am a beginner so forgive me if this answer is obvious.

    Thank you,

  4. Cool!

    is there a way to tweak the .js so that you wont see more than one section at a time?

  5. Would there be a way to achieve this effect using inline img tags instead of background images for each section? I can’t seem to find any examples out there at all. And wondering if its even possible.

  6. Quick question. How do I make this unordered list of dots horizontal? Simply add a ‘display: inline’ somewhere to the CSS? Forgive me, I’m away from my laptop so I can’t play around with the code — I’m reading this from my tablet. Would changes to the jQuery be necessary? I love the simplicity but would like the same vertical scrolling with a horizontal navigation centered at the TOP of the page.

    Also, how does one get the page to open (start) at the bottom and scroll up instead of down?

    Any guidance appreciated! Thanks much!

  7. I’ve been longing to use this on a project for years now. I’ll be able to do it now. Thanks for the tut!

  8. Hi,
    I am so thankful to have found You.
    I am really new at code writing and I was wondering if there is just an html and css version of several of these awesome effects?
    for example the Slide and Push Menus, Fixed Background scrolling, On scroll animated Header and the On Scroll Effect Layout…
    The Javascript intimidates me a bit. Not very familiar and a bit confusing honestly.
    I am learning the transform and transition effects in css.. Would these be possible candidates?
    Any Help Would Be Greatly Appreciated.
    Thanks For Your Valuable Time.
    Awesome Work!!