<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Scoll Down and up change color </h2> <div id="flux"> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> <div id="demo"> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br/> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> </div> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at Pretium Donec felis dolor penatibusPhasellus consequat Vivamus dui lacinia Ornare nonummy laoreet lacus Donec Ut ut libero Curabitur id Dui pretium hendrerit sapien Pellentesque <br> </div> </div>

#flux{width:500px;height:350px;overflow:auto; background:green;}

$(function(){ $('#flux').bind('scroll', function(){ if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight){ document.getElementById("demo").style.background="blue" }else { document.getElementById("demo").style.background="yellow" } }); });