网站建设:使用css的sticky让元素固定在某个div里面当网页滚动的时候

固定元素是页面上不会滚动到视图外的元素。换句话说,它粘在可见区域(视口或滚动框)。您可以使用position使用CSS创建它:sticky; 。 它们在任何滚动之前就像相对位置的元素一样,并且一旦达到滚动阈值就像固定元素一样。目前,只有Firefox支持它。 html代码 <h4>Scroll to see the sticky element <em>sticking</em></h4> <div class=”extra”></div>   <div id=”wrapper”> <div id=”sticky”>sticky</div> </div>   <div class=”extra”></div>   CSS代码 #sticky { position: sticky; position: -webkit-sticky; background: #f83d23; width: 100px; height: 100px; top: 70px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 6px #000; color: #fff; } .extra, #wrapper { width: 75%; margin: auto; background-color: #ccc; } #wrapper { height: 800px; } .extra { height: 100px; } body { font-family: georgia; height: 1000px; } h4 { text-align: center; } @media (min-height: 768px) { #wrapper{ height: 2000px; } }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设:使用css的sticky让元素固定在某个div里面当网页滚动的时候
分享到:
赞(0)
广告位820*80