说明

>将标题放在背景中
>将机身高度设置为标题高度加内容高度
>将内容放在身体底部的包装物中：position：absolute;底部：0
>将内容放在包装的顶部：position：absolute;顶部：0
>设置包装高度以匹配内容高度
>当内容包装的顶部滚动到可见部分的底部时,将其位置更改为固定在该位置：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
    }
}