CSS中有个background-attachment属性，当我们设置属性值为fixed的时候，背景图片相对付窗体定位，不受滚动影响。
于是，我们的实现就很大略：信息流列表HTML中插入个广告<a>链接，然后广告图作为背景图呈现，设置background-attachment:fixed效果就可以实现了，就这么大略。
HTML和CSS代码示意：
<div class=\"大众list\"大众>信息流列表1</div><div class=\"大众list\公众>信息流列表2</div><a href=\"大众#\"大众 class=\"大众ad\公众 target=\公众_blank\"大众>广告</a><div class=\公众list\公众>信息流列表3</div><div class=\公众list\"大众>信息流列表4</div>.ad { display: block; height: 600px; background: url(./ad.jpg) no-repeat top fixed; background-size: 100%;}唯一的不敷：iOS Safari不支持background-attachment:fixed
iOS Safari很早时候position:fixed也不支持，后来妥协了，支持了；但是background-attachment:fixed还是老样子，不支持，怕是嫌弃background-attachment:fixed烧性能，对付一个连IE6，IE7浏览器都支持良好的CSS声明，Safari不支持（包括iOS微信），我也无力说些什么。
因此，我们还须要额外做些功夫，兼容下iPhone手机浏览器。
我的做法是如果是iPhone手机，广告图片postion:fixed定位，合营JS实时clip剪裁。核心JS如下：
// ele便是广告元素DOM工具window.addEventListener('scroll', function () { var bound = ele.parentElement.getBoundingClientRect(); var clip = 'rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')'; ele.style.clip = clip;});
查了下浏览器兼容性资料，创造Android4.4+版本开始，放弃了对background-attachment:fixed的支持，但是Android Chrome浏览器却支持，这有些令人不解（见下图）。
我用家里人的Android手机测试，背景效果表现为scroll，看来JS补丁要多个Android设备。
3、position:fixed也可以实现藏在后面的信息流广告position:fixed也可以实现藏在后面的信息流广告，实现事理便是藏在其他信息流元素的背后，以及头部或者底部元素（如果有）的底部，关键便是z-index层级掌握了。虽然事理大略，但是实际操作还是有些啰嗦的，常日信息流页面的HTML构造都比较繁芜，此时再z-index属性各种设置，很随意马虎造成z-index混乱。
效果大致如下GIF截屏：
HTML和CSS代码事理示意：
<div class=\公众list\"大众>信息流列表1</div><div class=\公众list\"大众>信息流列表2</div><a href=\"大众#\"大众 class=\"大众ad\"大众 target=\公众_blank\"大众> <img src=\公众./ad.jpg\公众></a><div class=\"大众list\公众>信息流列表3</div><div class=\公众list\公众>信息流列表4</div>
.list { background-color: #fff; position: relative; z-index: 1;}.ad { display: block; height: 576px;}.ad img { position: fixed; top: 0; width: 400px;}
优点和不敷
基于position:fixed实现的优点在于：
1. 我们的广告内容可以支持繁芜HTML，而不仅仅是一张图片；
2. 所有浏览器都兼容，包括iPhone Safari浏览器。
不敷在于：
1. 须要其他元素进行层级合营，相互耦合增加了CSS的繁芜度。
如果实际开拓时候创造z-index层级掌握比较麻烦，可以试试第一个demo中利用的CSS clip剪裁，直接只显示当前广告区域内容，不过须要JS合营，不是纯CSS实现了，自己权衡。
4、结束语采取position:fixed固定定位实现的时候，我们还可以把广告元素从信息流列表中抽离，直接放在全体容器的后面，然后借助visibility属性实现点击穿透，如下示意：
<a href=\"大众#\"大众 class=\公众ad\"大众>广告</a><ul> <li>信息流列表1</li> <li>信息流列表2</li> <li></li> <!-- 撑开高度 --> <li>信息流列表3</li> <li>信息流列表4</li></ul>
.ad { position: fixed;}ul { position: relative; visibility: hidden;}li:empty { / 撑开高度，实际开拓请利用类名掌握，这里精简HTML才利用:empty / height: 576px;}li:not(:empty) { visibility: visible;}
详细就不展开了。
英格兰凉了，比利时很强。
希望本文内容可以帮助须要的人。
然后，如果你有更好地实现方法，欢迎不吝见教！
