Add to the very bottom of the theme.js.liquid to hide an element when scrolled lower than threshold, for example hide fixed header

t_sticky.js

var t_sticky = {
    monitor: function() {
        if( !this.waiting ) {
            setTimeout( this.check.bind(this), 250 );
            this.waiting = true;
        }
    },
    check: function() {
        var val = this.$html.scrollTop() > this.at ? 0 : 1;
        if( this.is_on != val ) {
            this.$header.css( {'opacity': val, 'z-index': val ? '': -5 } );
            this.is_on = val;
            console.log("Set to:", val);
        }
        this.waiting = false;
    },
    waiting: false,
    is_on: 1,
    $html: $('html'),
    
         at: 1100,                      /* switch at what position (in pixels ) */
    $header: $( '.header-container' )   /* which element to make transparent */
        .css( 'transition', 'opacity 0.3s ease-in-out' )
}
$(document).on( 'scroll', t_sticky.monitor.bind(t_sticky) );

/* example code to make header fixed(sticky) in Brooklyn theme for Shopify 
$('.header-wrapper').css({
    "position": "fixed",
    "z-index": 1000,
    "background": "rgba(100,100,100,0.5)"
});
*/