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

在代码下方使用可能的解决方案进行编辑

该网站有一个完整的视频页面

滚动操作：不显示距离顶部250px或更低的内容-因此视频顶部的250px始终可见

也许更好的理解方法是：将内容隐藏在透明的

div

下面。但我认为第一种解释更符合代码

第二种解释会引出许多问题和半答案。但是没有一个能解决我的问题

这里有一个未回答的问题，涉及很多方面：

我希望滚动条是全高的

也许这是一个提示：
此代码可以检测内容位置。现在来隐藏上面的溢出

演示

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>

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

编辑
Gajus Kuizinas在评论中建议复制背景并将其用作面具，这并不能真正解决问题，但他让我思考（谢谢）。这里的关键词是掩码。我发现了一篇关于这方面的好文章：

---

我认为这可能是一个很好的解决方案。遮罩应具有

位置：固定，
顶部：250px，
高度：100%（-250px）。唯一的问题是我不知道如何使用固定位置和可滚动内容制作掩码。你能明白我的意思吗？
你可以把可见部分变成一个
位置：固定；高度：250px
只要滚动过它：

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');
        }
    });
});

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

CSS:

$(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');
        }
    });
});

#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：
将
#bgvid
包装在

小提琴：

解释
将标题置于背景中
将正文高度设置为页眉高度加上内容高度
将内容放在正文底部的包装中：
位置：绝对；底部：0
将内容放在其包装的顶部：
位置：绝对；顶部：0
将包装高度设置为与内容高度匹配
当内容包装的顶部滚动到可见部分的底部时，在该点将其位置更改为固定：
position:fixed；顶部：可见部分的底部
如果内容包装器是
位置：fixed
，请在其包装器内向上移动内容以继续滚动
这些值中的大多数是在JavaScript中设置的，以获取实际计算值，而不是百分比。这也允许在调整窗口大小时重新计算

代码
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>

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

JavaScript（真正神奇的地方）

只需在您打算使用的容器中复制相同的背景，就像一个掩码一样。除非我误解了这个问题。@Gajus我想你对这个问题的理解是正确的。问题是网站的背景不牢固，而且与原始背景不匹配。此外，背景是视频，因此更难将它们匹配在一起。谢谢。你会考虑用图片作为背景吗？这是个大问题，但是措辞可以解决一点。从你提供的东西中很难看出你想要什么。基本上，你的内容顶部的250px是不可见的-或者是这样显示的，所以你可以使用原生滚动，仍然可以看到全屏背景视频的250px，对吗？我想出了一个更好的解决方案，可以在所有5个浏览器中工作。。。当应用
位置时，Chrome中的视频会改变其大小，这看起来并不漂亮，但很实用。但是它在Firefox中根本不起作用。这太棒了！工作起来很有魅力。很好的解释和很好的提示。非常感谢你！对于固定高度的收割台，我将如何修改此选项？例如155px。