滚动时隐藏透明 div 下的内容

Question

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

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

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

也许更好地理解这一点：将内容隐藏在透明的div之下。 但我认为第一个解释与代码更相关。

第二个解释导致了许多问题和半答案。 然而，他们都没有解决我的问题。

这是一个未回答的问题，涵盖了很多内容： 如何隐藏在透明 div 下滚动的内容？

我更喜欢滚动条是全高的。

也许这可能是一个提示： 当窗口顶部到达特定元素时将类添加到 DIV，否则将其删除
此代码可以检测内容位置。 现在隐藏这个上溢。

演示
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 在评论中建议复制背景并将其用作面具，这并不能真正解决问题，但他让我思考（谢谢）。 这里的关键词是mask 。 我找到了一篇关于此的好文章： http : //thenittygritty.co/css-masking我认为这可能是一个很好的解决方案。 面具将有position:fixed; , top:250px; ， height:100%; （-250 像素）。 唯一的问题是我不知道如何制作具有固定位置和可滚动内容的蒙版。 你能明白我的意思吗？

Answer 1

这是一个小提琴的工作解决方案。

说明

1. 将标题放在背景中
2. 将身高设置为标题高度加上内容高度
3. 将内容放在正文底部的包装器中： position: absolute; bottom: 0 position: absolute; bottom: 0
4. 将内容放在其包装器的顶部： position: absolute; top: 0 position: absolute; top: 0
5. 设置包装器高度以匹配内容高度
6. 当内容包装器的顶部滚动到可见部分的底部时，将其位置更改为固定在该点： position: fixed; top: bottom of the visible part position: fixed; top: bottom of the visible part
7. 如果内容包装器是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
    }
}

Answer 2

您可以将可见部分转换为一个position: fixed; height: 250px position: fixed; height: 250px ，只要你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/

Answer 3

作为替代方案，我建议改为模糊 div 背景，它显然不那么复杂，只需一行代码，而且当您的内容到达顶部时，您的内容被背景切成两半，这看起来并不奇怪。