【问题标题】：Hide content underneath a transparent div while scrolling滚动时隐藏透明 div 下的内容
【发布时间】：2014-06-12 13:21:17
【问题描述】：

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

该网站有整页视频。

滚动操作：不显示距顶部 250 像素或更小的内容 - 因此视频顶部的 250 像素始终可见。

也许更好的方式来理解这一点：将内容隐藏在透明的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
此代码可以检测内容位置。现在隐藏这个上部溢出。

演示
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;
}

编辑
Gajus Kuizinas 在 cmets 中建议复制背景并将其用作蒙版，这并不能真正解决问题，但他让我思考（谢谢）。这里的关键词是mask。我找到了一篇很好的文章：http://thenittygritty.co/css-masking 我认为这可能是一个很好的解决方案。掩码将具有position:fixed;、top:250px;、height:100%;(-250px)。唯一的问题是我无法弄清楚如何制作具有固定位置和可滚动内容的蒙版。你明白我的意思吗？

【问题讨论】：

只需在您打算使用的容器中复制相同的背景，就像蒙版一样，jsfiddle.net/4TgmF/1。除非我误解了这个问题。
@Gajus 我认为您确实正确理解了这个问题。问题是该站点的背景并不稳固，并且与原始背景不匹配。而且背景是视频，所以更难将它们匹配在一起。谢谢。
您会考虑使用图片作为背景吗？
不幸的是背景必须是视频。
这是一个很大的问题，但措辞可以稍微解决一下。很难从你提供的东西中分辨出你想要什么。基本上，您的内容顶部的 250 像素是不可见的 - 或者以这种方式显示，因此您可以使用原生滚动并仍然看到 250 像素的全屏背景视频，对吧？

标签： javascript jquery html css transparency

【解决方案1】：

作为替代方案，我建议改为模糊 div 背景，它显然不那么复杂，只需一行代码，而且当您的内容到达顶。

【讨论】：

最好提供您在答案中提到的那一行代码。
嗯，是的，但我并没有解决发布的问题，只是指出了一种不同的方法来解决它，它也可以通过多种方式实现并采用各种参数，这就是我离开替代方案的原因向那些期待调查的人开放，并以最适合他们的方式尝试这个简单的选项，而不是写一个封闭的答案。

【解决方案2】：

Here is a working solution in a fiddle.

说明

在后台放置标题
将正文高度设置为标题高度加上内容高度
将内容放在正文底部的包装器中：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
    }
}

【讨论】：

我将如何修改这个固定高度的标题？例如 155 像素。

【解决方案3】：

只要滚动过去，您就可以将可见部分变成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/

【讨论】：

当应用position 时，Chrome 中的视频会改变它的大小——这看起来不太漂亮，但它很实用。但是它在 Firefox 中根本不起作用。