<div id="CabeceraMenu"> <div class="FullWidth"> <img src="http://multifoto.es.vu/di-6SWK.jpg" /> </div> </div> <div class="Cabeza"> <p>Hola.</p> <p>Esto serĂ¡ rojo al hacer scroll</p> </div> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
body {margin: 0; padding: 0;} .FullWidth {width: auto; overflow: hidden;} .FullWidth img {width: 100%;} .FijarMenu {background-color: red;}
$(document).ready(function() { $(window).resize(function() { var Alto = $("#CabeceraMenu").height(); $(window).scroll(function() { if ($(this).scrollTop() > Alto) { $(".Cabeza").addClass("FijarMenu"); } else { $(".Cabeza").removeClass("FijarMenu"); } }); }); });