滾動時隱藏透明 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 背景，它顯然不那么復雜，只需一行代碼，而且當您的內容到達頂部時，您的內容被背景切成兩半，這看起來並不奇怪。