在滚动时将内容隐藏在透明div下面

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.

滚动动作:不显示距离顶部250px或更小的内容——因此视频顶部250px始终可见。

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

也许更好的理解方式是:隐藏在透明div下的内容，但是我认为第一个解释是更多的代码相关。

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?

这里有一个没有回答的问题:如何隐藏在透明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.

这可能是一个提示:当窗口顶部到达某个特定元素时，向DIV添加一个类;如果不是，则删除它。现在来隐藏上面的溢出。

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

演示http://jsfiddle.net/4TgmF/

HTML

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

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?

编辑Gajus Kuizinas在评论中建议复制背景并将其作为一个面具使用，这并不能真正解决问题，但他让我思考(谢谢)。这里的关键词是“面具”。我发现了一篇很好的文章:http://thenittytough。我认为这是一个很好的解决方案。掩模的位置:固定;顶部:250px;高度:100%;(-250px)唯一的问题是我不知道如何用固定的位置和可滚动的内容做一个掩码。你明白我的意思吗?

2 个解决方案

#1

Here is a working solution in a fiddle.

Explanation

1. Place header in background
2. 头在背景
3. Set body height to header height plus content height
4. 将体高设置为页眉高加上内容高
5. Place content in a wrapper at the bottom of the body: position: absolute; bottom: 0
6. 将内容放在身体底部的包装上:位置:绝对;底部:0
7. Place content at the top of its wrapper: position: absolute; top: 0
8. 将内容放在包装的顶部:位置:绝对;上图:0
9. Set the wrapper height to match content height
10. 设置包装器高度以匹配内容高度
11. 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
12. 当内容包装的顶部滚动到可见部分的底部时，将其位置更改为此时的固定位置:position: fixed;顶部:可见部分的底部
13. If content wrapper is position: fixed, shift content up inside its wrapper to continue scrolling
14. 如果内容包装器是位置:固定的，将内容向上移动到包装器中继续滚动

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

大多数这些值都是在JavaScript中设置的，以得到实际的计算值，而不是百分比。这也允许重新计算窗口大小。

Code

HTML

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

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)

JavaScript(真正神奇的地方)

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
    }
}

#2

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

你可以将可见部分变为一个位置:固定;高度:一经滚动即为250px:

JS:

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:

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">

将#bgvid包装在

中

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

小提琴:http://jsfiddle.net/4TgmF/11/