使用代码
下的可能解决方案进行编辑该网站有一整页视频。
滚动操作：不显示距离顶部250px或更少的内容 - 因此视频顶部的250px始终可见。
或许更好的理解方法是：隐藏透明div下的内容。但我认为第一个解释是更多的代码相关。
第二种解释导致了许多问题和半答案。然而，他们都没有解决我的问题。
这是一个未解决的问题，涵盖了很多：How to hide content that is scrolled under a transparent div?
我更喜欢滚动条为全高。
也许这可能是一个提示：Add a class to a DIV when top of the window reach a specific element and remove it when not
此代码可以检测内容位置。现在隐藏这个上溢。
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;
}
修改
Gajus Kuizinas在评论中建议复制背景并将其用作面具，这并没有真正解决问题，但他让我思考（谢谢）。这里的关键词是掩码。我发现了一篇很好的文章：http://thenittygritty.co/css-masking
我认为这可能是一个很好的解决方案。掩码将具有position:fixed;，top:250px;，height:100%;（ - 250px）。唯一的问题是我无法弄清楚如何使用固定位置和可滚动内容来做掩码。你能明白我的意思吗？
答案 0 :(得分：5)
position: absolute; bottom: 0 position: absolute; top: 0 position: fixed; top: bottom of the visible part position: fixed，请在其包装器内向上移动内容以继续滚动这些值中的大多数都是在JavaScript中设置的，以获取实际的计算值，而不是百分比。这也允许重新计算窗口大小调整。
<强> 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 （真正的魔法发生的地方）
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
}
}
答案 1 :(得分：0)
滚动浏览后，您可以将可见部分转换为position: fixed; height: 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');
}
});
});
<强> 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 ：
将#bgvid换成<div id="inner">
<强>小提琴： http://jsfiddle.net/4TgmF/11/