Changing Background color when user scrolls has set trend in the industry and is being used quiet often for one page websites, special pages in projects and more places. Every time I find one of those, two of my fingers tap on the track pad to check the source to figure how it’s achieved just because there is a ton of different ways to achieve this and every developer I see uses a different method, I thought to make one on my own.

To implement Changing background the minimum requirements are

• the contents of the page has to be arranged in blocks..
• Set Transparent background to all elements except the body or the main wrapper, this is where the background color will be changed on scroll.

I had seen developers using a variety of techniques to get this done, in many it’s hard coded Javascript where the color code & the break points are written directly into Javascript making the script not usable again. If not the color the height or the break points are embedded in Javascript.

So I want to make a script that can take values for background-color and break point (where the color transition has to be triggered ) from the HTML markup, this is gonna make the script reusable and easy to update work.

Download
Github
Demo

How it works

To achieve what I wanted, I need to extract the value of height & background-color from the mark up then make awesome.

Before planing the Javascript I finalized the markup, because I need to make this reusable by small modification in HTML markup alone.

	

 
Slide 1


 
Slide 2


 
Slide 3

Next task is to get the break points which is easy but isn’t hard coded that mean’s I’m gonna have to get it dynamically, this is what makes this script work with web page having elements of different height and also the background-color from the above markup

The following parameters are available once the page is loaded and it’s just some more magic to get the things done.

• The Height of elements
• Background Color.

The height of the elements will act as break points, it’s where the background color has to change. Background color that’s the color webpage background should have.

Extracting the Height & Background Data

The class selector .slide has to be applied to blocks where the background color transaction is required. This is to use siblings(); function in Jquery to grab the details of all element having the class .slide

var siblings = $('.slide').siblings();

The siblings functions construct a new jQuery object from the matching elements, which en-capsules the information we need the height, background and lot more other data as well, with a simple traversal u can get these out of object.

Fixing the Breakpoints

This is not a readily available value in this experiment, but with some fancy calculations we already grabbed the height of all elements using siblings(); function, now let’s convert those heights into break points.

Break Points are calculated by adding the heights of all elements before the current one, that is the break point for any element will be the sum of heights of elements from the top till the element. Starting with Zero for the first element.

When to change Background

The scroll height is obtained from .scrollTop() function in Jquery, it returns the current vertical position of the scroll bar for the first element in the set of matched elements, The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area.

Left side indicates the height of each element, in right side the break points and how it’s calculated.

With Break Point and current position of scroll bar in hand all it’s left is to change the background color once they are matched. Before we can do that, the calculated break points and the corresponding background color has to be stored some where easily accessible, else we will end up doing the whole calculations every time the user scrolls.

The height and the corresponding color is stored in a single dimensional array, with the array index as the sum of heights of elements up to the current element from top ( the break point ) and the value as the background color of the element. A typical array will be like

Array
(
    [0]   => "#fffff"
    [100] => "#ff00ff"
    [200] => "#00ffff"
)

A simple search in the array will give the background value, In this experiment I have used Binary search.

Change the Background

Set the background-color to the body or the wrapper that encloses all the elements.

$("body").css('background-color',bgColor);

set transaction in CSS to get a smooth transaction effect.

This is one among a bundle of methods available to change background on scrolls. Hope this is gonna help you.

Javascript

$(document).ready(function(){  
  var wHeight = $(window).innerHeight();
  var siblings = $('.slide').siblings();
  var perset = {};
  var sumHeight = 0;
  for(var i = 0; i> 1);
        if(key <= nums[mid]){
            high = mid - 1;
        }else {
            low = mid +1;
        }
    }
    return high;
  }

  var scroll_pos = 0;

  function processScroll() { 
    scroll_pos = $(this).scrollTop();

    var presetHeights = Object.keys(perset);
    var x = lessThan(presetHeights,scroll_pos);
    var bgColor = perset[presetHeights[x]];
    if(bgColor) {
      $("body").css('background-color',bgColor);
    }
  }

  $(document).scroll(processScroll);
});

Download
Github
Demo