html – 溢出滚动但可见

概述我有一个标题元素,下面有一个文章元素.文章有溢出：滚动.请参阅我的网站 here. 我的目标是使标题半透明,以便在滚动时文章内容将显示在其后面.我希望文章溢出显示标题. 主要限制是滚动条应该从标题的底部跨越,而不是顶部. 如何才能做到这样的效果？ 诀窍是复制内容.以下是具有模糊和半透明标题的解决方案. $(function() { // Clone the content var $con 我有一个标题元素,下面有一个文章元素.文章有溢出：滚动.请参阅我的网站 here.

我的目标是使标题半透明,以便在滚动时文章内容将显示在其后面.我希望文章溢出显示标题.

主要限制是滚动条应该从标题的底部跨越,而不是顶部.

如何才能做到这样的效果？

解决方法 诀窍是复制内容.以下是具有模糊和半透明标题的解决方案.

$(function() {  // Clone the content  var $content = $('.content');  var $clone = $('.clone').HTML($content.HTML());    // Performance scrolling  var content = $content.get(0);  var clone = $clone.get(0);  content.onscroll = function() {    clone.scrolltop = content.scrolltop;  };});

div {  wIDth: 400px;  position: absolute;  top: 0;  right: 0;  left: 0;  bottom: 0;}.content {  top: 50px;  overflow: scroll;}.clone {  padding-top: 50px;  overflow: hIDden;  -webkit-filter: blur(2px);}.header {  height: 50px;}.overlay {  background: rgba(240,240,0.8);}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div >  Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus at orci vestibulum,congue urna nec,fringilla dolor. Donec pellentesque odio non dui vehicula,eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricIEs. Ut ante velit,facilisis  Lorem ipsum dolor sit amet,facilisis</div><div >  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 溢出滚动但可见全部内容，希望文章能够帮你解决html – 溢出滚动但可见所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。