CSS中如何使用position:sticky实现粘性布局-成都快上网建站

CSS中如何使用position:sticky实现粘性布局

小编给大家分享一下CSS中如何使用position:sticky 实现粘性布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站是一家集网站建设,淮阳企业网站建设,淮阳品牌网站建设,网站定制,淮阳网站建设报价,网络营销,网络优化,淮阳网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

简介

一般都知道下面几个常用的:

{
position: static;
position: relative;
position: absolute;
position: fixed;
}

在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值:

/* 全局值 */
position: inherit;
position: initial;
position: unset;

估计大部分都没有用过position:sticky吧。这个属性值还在试验阶段。怎样描述它呢?

初窥 position:sticky

sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。

什么是结合两种定位功能于一体呢?

元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。

而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

sticky:对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

常用场景:当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部。

代码:

{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

如下图表现方式:

距离页面顶部大于20px,表现为 position:relative;

CSS中如何使用position:sticky 实现粘性布局

距离页面顶部小于20px,表现为 position:fixed;

CSS中如何使用position:sticky 实现粘性布局

运用 position:sticky 实现头部导航栏固定

html代码:


    
        

标题一

        

这是一段文本

        

这是一段文本

        

这是一段文本

    
             

标题二

        

这是一段文本

        

这是一段文本

        

这是一段文本

    
             

标题三

        

这是一段文本

        

这是一段文本

        

这是一段文本

    
             

标题四

        

这是一段文本

        

这是一段文本

        

这是一段文本

    
             

标题五

        

这是一段文本

        

这是一段文本

        

这是一段文本

    
             

标题五六

        

这是一段文本

        

这是一段文本

        

这是一段文本

    

CSS代码:

.samecon h3{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background:#ccc;
    padding:10px 0;
}

同理,也可以实现侧边导航栏的超出固定。

生效规则

CSS中如何使用position:sticky 实现粘性布局

这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。

css的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

以上是“CSS中如何使用position:sticky 实现粘性布局”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:CSS中如何使用position:sticky实现粘性布局
网址分享:http://kswjz.com/article/gpchpj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯