JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mk-page-id-1" class="theme-page-wrapper mk-main-wrapper">
<aside id="mk-sidebar" class="mk-builtin test">
    <div class="sidebar-wrapper" style="min-height:600px;">
        Page without banner example
	</div>
</aside>		
</div>

<div id="mk-page-id-2" class="theme-page-wrapper">
</div>
<div class="theme-page-wrapper">
<aside id="mk-sidebar" class="mk-builtin">
    <div class="sidebar-wrapper" style="min-height:600px;">
        Page with banner example
    </div>
</aside>
</div>

JavaScript

$(function() {
    var div = $(".sidebar-wrapper");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (($("sidebar-wrapper").parent().parent("mk-main-wrapper")) & (scroll > 147)) {
            div.css( "background", "yellow" );
		} else if (scroll > 263) {
			div.css( "background", "green" );
        } else {
            div.css( "background", "blue" );
        }
    });
});