Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to HTML
Preview Source Code
Download
HTML
CSS
html, body { 
font-family:arial; 
margin:0px; 
height: 100%; 
}
section { 
font-size: 40px; 
text-align: center; 
padding: 50px; 
height: 100%; 
margin: 100px; 
}
#s1 { background: #def; }
#s2 { background: #fde; }
#s3 { background: #fed; }
.s1 { background: #9bd; }
.s2 { background: #d9b; }
.s3 { background: #db9; }
JS
var bodyEl = $("body");
$(window).on("scroll", function() {
  var scrollTop = $(this).scrollTop();
  $(".cmn-scn").each(function() {
    var el = $(this),
        className = el.attr("id");
    if (el.offset().top < scrollTop) {
       bodyEl.removeClass();
       bodyEl.addClass(className);  
    } else {
      bodyEl.removeClass(className);
    }
  });
});
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *