Hi there,
By default. this could be done by the current setup of X, except that it will not cater to your specification about having the solid background set to the header after scrolling 200px down.
Try adding this code to the Global JS panel:
jQuery(function($){
$(window).scroll(function(){
if( $(this).scrollTop() == 0 ) {
$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
}
});
});
This will remove the class x-navbar-fixed-top
(when you scroll to the top of the page) to the header area which adds the solid color to the header. Therefore, making the header have a transparent background when you scroll back up.
If you really want to specifically have the solid background for 200px down, you will have to write some JS code that will detect how far you have scrolled from the top and add a class to the navigation bar container when it reaches the point that you have indicated then also write the CSS code that will control.
Hope this helps.