JSFiddle - React, Tailwind, and code Playground

by Rafael_

HTML

<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>

CSS

body {margin: 0; padding: 0;}

.FullWidth {width: auto; overflow: hidden;}
.FullWidth img {width: 100%;}

.FijarMenu {background-color: red;}

JavaScript

$(document).ready(function() {
	$(window).resize(function() {
		var Alto = $("#CabeceraMenu").height();
		$(window).scroll(function() {
			if ($(this).scrollTop() > Alto) {
				$(".Cabeza").addClass("FijarMenu");
			} else {
				$(".Cabeza").removeClass("FijarMenu");
			}
		});
	});
});