Custom page style on scroll

Imagine you want to give a custom page style on scroll, in other words a dynamic style that depends on the vertical scroll bar position.

If we were able to assign a different CSS class to the body depending on the scroll position, the most difficult part of the job would be done.

To do so, we imagine the body divided into 5 sectors.

Every time the vertical scroll bar enters in one of these 5 sectors the body will have a different CSS class.

It will be enough to add an event listener that is triggered when the user scrolls the page.

function eos_style_on_scroll(){
  var eos_body = document.getElementsByTagName('body')[0],
    docheight = Math.max(
    document.body.scrollHeight,document.documentElement.scrollHeight,
    document.body.offsetHeight,document.documentElement.offsetHeight,
    document.body.clientHeight,document.documentElement.clientHeight
  ),
    winheight= window.innerHeight || (document.documentElement || document.body).clientHeight,
    scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop,
    trackLength = docheight - winheight,
    scrollPos = Math.floor(scrollTop/trackLength * 100),
    scrollPos = 20*parseInt(scrollPos/20),
    scroll_class = ' eos-scroll-' + scrollPos + '-perc-of-body-scroll';
  if(eos_body.className.indexOf('eos-scroll') > 0){
    var prevScroll = eos_body.className.split('eos-scroll')[1].split('perc-of-body-scroll')[0];
    eos_body.className = eos_body.className.replace(' eos-scroll' + prevScroll + 'perc-of-body-scroll','');
  }
  eos_body.className  = scroll_class;
}
window.addEventListener('scroll',eos_style_on_scroll);

When the user scrolls the page, the function “eos_style_on_scroll” adds the class “eos-scroll-[xx]-perc-of-body-scroll” to the body, where [xx] is 0, 20, 40, 60, 80 or 100 depending on the scroll bar position.

Then you need just to add your custom CSS taking advantage of the body class eos-scroll-[xx]-perc-of-body-scroll, maybe using some keyframes for animation.

In the example below the main section color changes depending on the scroll,

I’ve applied the same dynamic style on this blog post to show you an example of what you can do applying this method.

I’m not a graphic designer, I hope you have better ideas than mine to take advantage of this method and give a custom page style on scroll.

.eos-scroll-0-perc-of-body-scroll #main{
    background-color:#eee9e4 !important
}
.eos-scroll-20-perc-of-body-scroll #main{
    background-color:#bcbcbc !important
}
.eos-scroll-40-perc-of-body-scroll #main{
    background-color:#535353 !important
}
.eos-scroll-40-perc-of-body-scroll p {
    color: #fff !important
}
.eos-scroll-60-perc-of-body-scroll #main{
    background-color:#a4b7c6 !important
}
.eos-scroll-80-perc-of-body-scroll #main{
    background-color:#23282c  !important;
}
.eos-scroll-80-perc-of-body-scroll p {
    color: #fff  !important
}
.eos-scroll-100-perc-of-body-scroll #main{
    background-color:#535353  !important;
    opacity:1
}
.eos-scroll-100-perc-of-body-scroll p {
    color: #fff  !important
}

If you want to download the free plugin Style on Scroll that adds the CSS class depending on the scroll, click on the download button.