正如您在此页面中看到的:
http://pitchfork.com/,右侧有一些音频元素.我检查了他们,他们似乎有绝对的定位.但如果你向下滚动,你会发现它们是固定的.
怎么能实现这种行为?可以是一个绝对和固定的元素定位?
解决方法
创建一个很酷的固定滚动侧边栏,没有javascript和几行css.
固定垂直div,灵活的水平定位.
下面小提琴中的固定div似乎相对于容器定位,但这只是一种幻觉.
固定的DIVS总是与屏幕相对应.
绝对的潜水总是出现相对于他们最近的位置:相对的’容器.
HTML
<div class="Wrap">WRAP</div> <div class="Fixed">FIXED</div>
CSS
.Wrap{ background:#ccc; width:600px; height:300px; margin:0 auto; } .Fixed{ position:fixed; top:20px; right:50%; /* this is the trick to make the fixed div appear absolute */ background:#333; height:100px; width:50px; margin-right:-360px; /*Must be half of container width plus desired positioning*/ }
通过使用负边距和固定宽度容器来实现同时出现绝对和固定的div的错觉.
小网站版本适用于较小宽度的屏幕.
原文地址:https://www.jb51.cc/html/226237.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。