<div class="container facts mg-btm">
    <div class="row">
      <div class="twelve columns">
        <h1>Scroll to bottom</h1>
      </div>
   </div>
</div> 

body {
  background-color: rgb(255,174,31);
  color:#fff;
}
.facts h1{
  color:#fff;
  text-align:center;
  font-family:'Josefin Sans';
  padding: 250px 50px;
}
.mg-btm {
  margin-bottom:1500px;
}

 $(document).ready(function(){    
    var scroll_pos = 0;
    var animation_begin_pos = 0; //animation to begin
    var animation_end_pos = 1000; //animation to stop
    var beginning_color = new $.Color( 'rgb(255,174,31)' ); 
    var ending_color = new $.Color( 'rgb(119,127,160)' ); ;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop(); 
        if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
            //calculate the relevant transitional rgb value
            var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
            var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
            var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
            var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
            var newColor = new $.Color( newRed, newGreen, newBlue );
            $('body').animate({ backgroundColor: newColor }, 0);
        } else if ( scroll_pos > animation_end_pos ) {
             $('body').animate({ backgroundColor: ending_color }, 0);
        } else if ( scroll_pos < animation_begin_pos ) {
             $('body').animate({ backgroundColor: beginning_color }, 0);
        } else { }
    });
});