Hide Scrollable Content Behind Transparent Fixed Position Divs When Scrolling the Page

#flags {  position: fixed;  z-index:9999   }

<div style=" float: right; width: 100px; margin-top: 60px;">  <div id="flags">    <span>      <a href="default.html">        <img  id="uk" src="images/uk.png">      </a>    </span>    <span>      <a href="default_ita.html">        <img  id="uk" src="images/italy.png">      </a>    </span>  </div></div>

Hide content underneath a transparent div while scrolling

Here is a working solution in a fiddle.

Explanation

1. Place header in background
2. Set body height to header height plus content height
3. Place content in a wrapper at the bottom of the body: position: absolute; bottom: 0
4. Place content at the top of its wrapper: position: absolute; top: 0
5. Set the wrapper height to match content height
6. When the top of content wrapper is scrolled to the bottom of the visible part, change its position to fixed at that point: position: fixed; top: bottom of the visible part
7. If content wrapper is position: fixed, shift content up inside its wrapper to continue scrolling

Most of these values are set in JavaScript to get the actual calculated values, not percentages. This also allows recalculation on window resizing.

Code

HTML

<div id="header">
    <video id="bgvid" autoplay loop muted>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>
        
<div id="content_wrapper">            
    <div id="content">
    </div>
</div>

CSS

* { 
    margin:0; 
}
html, body {
    position: relative;
    width:100%;
    height:100%;
}
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1000;
    width:100%;
    height:100%;
}
#bgvid {
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
}
#content_wrapper {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;    
    z-index: -10;
}
#content {
    background: white;
    position: absolute;
    left: 0px;
    top: 0px;
}

JavaScript (where the real magic happens)

var $window = $(window);
var $body = $('body');
var $contentWrapper = $('#content_wrapper');
var $content = $('#content');
var minHeaderHeight = 250; // the height of the "visible part"

var lastWindowHeight = $window.height(); // save window height to calculate difference in height on resize

checkScroll(); // make sure scroll and all heights are correct on first load
stickyTop();   // make sure sticky top is used if needed on first load

$window.resize(function() {
    checkScroll();
    stickyTop();
});
$window.scroll(function() {
    stickyTop();
});

function checkScroll() {
    var newWindowHeight = $window.height();
    var windowHeightDif = newWindowHeight - lastWindowHeight;
    lastWindowHeight = newWindowHeight; // save current height for next call
        
    var contentHeight = $content.height();
    $contentWrapper.height(contentHeight);         // make sure wrapper will show entire content
    $body.height(newWindowHeight + contentHeight); // allow content to be scrolled off the screen by
                                                   // pushing content down by the amount of window height
    
    var windowScrollTop = $window.scrollTop();
    if (windowScrollTop > 0) {                                // don't scroll if at top to avoid video getting covered
        $window.scrollTop(windowScrollTop + windowHeightDif); // scroll by window height difference to keep content 
                                                              // in the same position on window resize
    }
}

function stickyTop() {
    var windowScrollTop = $window.scrollTop();
    var maxScroll = ($window.height() - minHeaderHeight);
    if (windowScrollTop >= maxScroll) {
        $contentWrapper.css('position', 'fixed').css('top', minHeaderHeight); // stop wrapper top at bottom of header
    } else {
        $contentWrapper.css('position', 'absolute').css('top', ''); // allow regular scrolling
    }
    
    if ($contentWrapper.css('position') === 'fixed') {       // if wrapper is fixed,
        $content.css('top', -(windowScrollTop - maxScroll)); // continue scrolling by shifting content up
    } else {
        $content.css('top', 0); // make sure content is lined up with wrapper
    }
}

---

Related Topics