position:sticky该如何使用

发布时间:2021-11-15 23:11:35 作者:柒染
来源:亿速云 阅读:201

这期内容当中小编将会给大家带来有关position:sticky该如何使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

  在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位 position:sticky 。

  它是相对定位 position:relative 和固定定位 position:fixed 的混合。

  使用它,我们不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。

  基本用法

  nav{ position:sticky; top:10px; /* 阈值 */}

  top/bottom属性

  比如我们设置top:100px时,在 viewport 视口滚动到元素距离小于设置的top:100px之前,元素为相对定位。当滚动到top:100px之后,元素将固定在与顶部距离 top:100px的位置,直到 viewport 视口回滚到阈值以下。

  根据下面的例子,我们可以看到position:sticky元素设置的top值是距离视口的距离,当它滚到距离低于其值时将固定在视口当中,此时该元素的效果就为固定定位。

  下面例子的结构:

  < h2 >顶部高200px 红线为中线 < /h2>< nav >这是导航 top:100px< /nav>< p>滚一个< /p>< p>滚一个< /p>

  生效条件

  需要注意的是,使用该属性有几个必要条件,否则会失效:

  父元素不能overflow:hidden或者overflow:auto属性。

  必须指定top、bottom、left、right4个值之一,否则只会处于相对定位。

  父元素的高度不能低于sticky元素的高度。

  sticky元素仅在其父元素内生效。

  兼容情况

  position: -webkit-sticky;position: sticky;

上述就是小编为大家分享的position:sticky该如何使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 当position:sticky遇到bootstrap浮动布局时候的注意事项
  2. 使用vscode打开txt是乱码的原因

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

position:sticky

上一篇:常见Python的Web开发框架有哪些呢

下一篇:微信小程序修改checkbox的样式代码怎么写

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》