Hide content underneath a transparent div while scrolling

Question

Edit with possible solution below the code

The site has a full page video.

Scroll action: not to display content which is located 250px or less from the top — so 250px of top of the video is always visible.

Perhaps a better way to understand this: hide content underneath a transparent div. But I think the first explanation is more code relevant.

Second explanation leads to numerous questions and semi-answers. None of them however solves my problem.

Here's an unanswered question that covers a lot: How to hide content that is scrolled under a transparent div?

I'd prefer the scroll bar to be full height.

Maybe this could be a hint: Add a class to a DIV when top of the window reach a specific element and remove it when not
This code could detect content position. Now to hide this upper overflow.

Demo
http://jsfiddle.net/4TgmF/

HTML

<div id="header">
    <video autoplay loop poster="https://dl.dropboxusercontent.com/u/9200106/rsz_dreamstimefree_252880.jpg" id="bgvid">
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogv" type="video/ogg">
    </video>
    <div id="visible_part">Part of the background that shoud be visible at all times. This DIV and its styling is for demonstration only</div>
</div>

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</div>

CSS

* { margin:0; }
html, body {
  width:100%;
  height:100%;
}
#header {
    width:100%;
    height:100%;
}
#bgvid {
    position:fixed;
    z-index:-1000;
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
}
#visible_part {
    position:fixed;
    height:250px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    color:#fff;
    background:rgba(0,0,0,0.1);
}
#content {
    width:100%;
    min-height:100%;
    background:#fafafa;
}

Edit
Gajus Kuizinas suggested in comments to replicate the background and use it as a mask, which doesn't really solves the problem, but he got me thinking (thanks). The key word here is mask. I found a good article on this: http://thenittygritty.co/css-masking I think this could be a great solution. The mask would have position:fixed;, top:250px;, height:100%;(-250px). The only problem is I can't figure out how to do a mask with fixed position and scrollable content. Can you see what I mean?

Just replicate the same background in the container you intend to use like a mask, http://jsfiddle.net/4TgmF/1/. Unless I have misunderstood the question. — Gajus, Apr 26 '14 at 21:37
@Gajus I think you did understand the question correctly. The problem is that the site's background is not solid and it doesn't match the original background that way. Moreover the background is a video, so it's even harder to match them together. Thanks. — Jon Desle, Apr 26 '14 at 22:11
lol right now what i am thinking is why but you can add the mask to a scroll event `.scroll()` js is a good way to solve this — nolawi, Apr 29 '14 at 22:38
@Jon If I understand your question, I may have a suitable solution. It needs some work to make sure you can always scroll to the bottom, and to make it work after a window resize. [But here is a fiddle to demonstrate a simple "sticky top".](http://jsfiddle.net/TrevinAvery/4TgmF/4/) If this works for you, I will post an answer with a description of the code. — Trevin Avery, Apr 30 '14 at 18:32
@Trevin It does work great in Firefox. Chrome however seems to have some problems when video is played (code with a poster does work as intended). Here's a fiddle with sample video: http://jsfiddle.net/4TgmF/6/ (I should've prepare a code with sample video before, sorry) — Jon Desle, Apr 30 '14 at 21:30
This is a great problem, but the wording could be worked out a bit. It's really hard to tell what you want from what you've provided. Basically, 250px of the top of your content to be invisible - or for it to appear that way, so you can use native scroll and still see 250px of the fullscreen background video, right? — sheriffderek, May 01 '14 at 00:29
@Jon Adding `z-index: -1` to `#content_wrapper` solved this issue. [Here is the fiddle.](http://jsfiddle.net/TrevinAvery/4TgmF/7/) — Trevin Avery, May 01 '14 at 02:58
I have discovered another solution which works perfectly in Chrome and FireFox (it does however flicker a little in IE, Opera, and Safari). I adapted it from the vail concept mentioned in [this post](http://stackoverflow.com/q/22469008/2463800) and shown in [this fiddle](http://jsfiddle.net/NAMka/4/). [Here is the my adaptation](http://jsfiddle.net/NAMka/6/). The advantage here is that you don't need to worry about the window size, or about resizing (which breaks the other solution). — Trevin Avery, May 01 '14 at 06:07
@sheriffderek "250px of the top of your content to be invisible" and the rest with visible background sounds right. It is basically what I meant. If you know how to describe the problem better than I did, please edit my question so the community can find and understand this better. Thanks. Trevin, your solution works really well, I'm well-satisfied with it. Accepted, thank you. — Jon Desle, May 01 '14 at 19:55

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

Here is a working solution in a fiddle.

Explanation

Place header in background
Set body height to header height plus content height
Place content in a wrapper at the bottom of the body: position: absolute; bottom: 0
Place content at the top of its wrapper: position: absolute; top: 0
Set the wrapper height to match content height
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
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
    }
}

how would I modify this for a fixed height header? For example 155px. — Natalia, Aug 26 '15 at 01:35

score 0 · Answer 2 · answered May 01 '14 at 13:43

You can turn the visible part into a position: fixed; height: 250px as soon as you scroll past it:

JS:

$(document).ready(function () {
    var bottom = $('#content').offset().top - 250; // this needs to be the same as #inner.fixed's height
    $(window).scroll(function () {
        if ($(this).scrollTop() > bottom) {
            $('#inner').addClass('fixed');
        } else {
            $('#inner').removeClass('fixed');
        }
    });
});

CSS:

#header, #inner {
    width:100%;
    height:100%;
}
#inner.fixed {
    position: fixed;
    height: 250px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#bgvid {
    position: fixed;
    z-index:-1000;
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
}
.fixed #bgvid {
    position: relative;
}

HTML: Wrap the #bgvid in a <div id="inner">

Fiddle: http://jsfiddle.net/4TgmF/11/

The video in Chrome changes its size when `position` is applied — which doesn't look pretty, but it is functional. However it doesn't work in Firefox at all. — Jon Desle, May 01 '14 at 19:51

score 0 · Answer 3 · answered Nov 25 '21 at 20:43

0

As an alternative i'd recommend blurring the div background instead, it's obviously way less complicated, just one line of code, and it wouldn't look weird that your content is getting cut in half with the background when it reaches the top.

answered Nov 25 '21 at 20:43

Rodrigo Yañez

75
7

1

It would be nice to provide that one line of code you mention within the answer. – Ruli Nov 25 '21 at 23:15
Well yes, but i ain't solving the posted problem, just pointing to a different way to approach it, it also could be implemented in many ways and taking various parameters, that's why i left the alternative open for those looking forward to investigate and try this simple option the best way it suits them and not writing a closed answer. – Rodrigo Yañez Nov 26 '21 at 01:10

Hide content underneath a transparent div while scrolling

3 Answers3

Here is a working solution in a fiddle.

Explanation

Code

Linked