滚动时如何让文本仅出现在 div 'window' 中？
How can I get text to appear only in a div 'window' while scrolling by?
我的内容很长。此内容中有一个 div。当此 div 滚动时，我希望显示文本...就好像 div 是 window 并且您看到的是外面的文本。当 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 滚动经过？
如果你想要一个纯粹的 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
我的内容很长。此内容中有一个 div。当此 div 滚动时，我希望显示文本...就好像 div 是 window 并且您看到的是外面的文本。当 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 滚动经过？
如果你想要一个纯粹的 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