position:sticky

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，当目标区域在屏幕中可见时，它的行为就像position:relative;

而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

用法：

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • position:sticky
    position:sticky是一个css3属性，类似position:relative和position:fix...
    尤蛊阅读 2,833评论 0赞 0
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1赞 92
  • [CSS学习笔记] 粘性固定 position:sticky
    2020.06.08更新 在研究rem布局时，无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定...
    这名字真不对阅读 16,805评论 7赞 20
  • 粘性布局position:sticky
    网站顶部的导航栏固定与否，显示隐藏与否的问题？如果不固定（position: relative），那么滚屏时，导航...
    灵籁阅读 9,604评论 0赞 0
  • position:sticky 的使用
    如果你想想做这样一个滚动跟随。那你肯定第一时间想到的一定是 position:fixed; 这个css 属性，然后...
    Northerner阅读 10,053评论 0赞 0