Have content disappear as it passes under a fixed div

Question

I have a fixed menu with a solid color fill that is about 20px from the top of the page, so you can see the background between the space.

I would like to have the content of the page scroll under the fixed solid menu and disappear so it won't show between the gap of the menu and top of the page, yet still be able to see the background image.

I've tried a variety of css styling, jquery scripts, but I just can't seem to figure how to go about doing it.

I did have a jquery script that would make the opacity go to 0 upon reaching a certain point, but that would just make the entire content disappear, rather than just the block under 100px from the top:

$(window).scroll(function() {
    if ($(this).scrollTop() <= 100) {
        $( ".cont" ).fadeOut();
    } else {
        $( ".cont" ).fadeIn();
    }
});

Is this possible to even implement?

Answer 1

If you don't need the background to scroll with the rest of the content, you can put a fixed-position div at the top of the page with the same background image. This will cover up the content above the header and blend in seamlessly with the background. Example: http://codepen.io/bvisness/pen/VLrxry

If you do need the background to scroll, you can use the above method, but use JavaScript to change the background-position of the body and masking div as you scroll. Example: http://codepen.io/bvisness/pen/WvXJae

WARNING: Repositioning background images on scroll can be a huge performance problem, so use with caution.