css - 滚动时如何让文本仅出现在 div 'window' 中？

Question

我的内容很长。此内容中有一个 div。当这个 div 滚动时，我希望文本出现......就好像 div 是一个窗口，你看到的是外面的文本。当 div 滚动时，文本保持固定。看看这个 fiddle :http://jsfiddle.net/bcu5fab7/6/

body{
    height: 1000px;
}
div{
    position: relative;
}
#text-container {
    position: relative;
    height: 300px;
    /*width: 400px;*/
    background: cyan;
    overflow: hidden;
    width:100%;
}
#text-container .boxtext {position:fixed; top:25%; overflow:hidden; padding:0 30px;}

<div style="">
    <p>1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
    
<div id='text-container'>
    <div class="boxtext">
         <p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
    </div>
</div>

<div style=""> <p>2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    </div>

如您所见，.boxtext div 中的文本具有 position:fixed。但它出现在其他内容的顶部。有办法解决这个问题吗？一种隐藏文本的方法，除非蓝色 div 滚动经过？

Answer 1

如果你想要一个纯 CSS 实现，你可以使用负 z-index:

body{
    height: 1000px;
}
div{
    position: relative;
    background:white;/*Covers the text, or you can see it through*/
}
#text-container {
    position: relative;
    height: 300px;
    /*width: 400px;*/
    background: cyan;
    overflow: hidden;
    width:100%;
    z-index:-2;/*Places it behind everything*/
}
#text-container .boxtext {
    position:fixed; 
    top:25%; 
    overflow:hidden; 
    padding:0 30px;
    z-index:-1;/*places it behind everything except cyan div*/
    background:transparent;
}

<div style="">
    <p>1.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
</div>
    
<div id='text-container'>
    <div class="boxtext">
         <p>Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. Inner text here. </p>
    </div>
</div>

<div style=""> <p>2.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
    </div>

否则，你必须使用JS。我曾经为此制作了一个简短的 jQuery 插件:
http://dev.debonairstudios.com/fromTop/
只有第一个示例有效，我真的应该更新文档 :D