CSS position属性sticky

这篇具有很好参考价值的文章主要介绍了CSS position属性sticky。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开发时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css3属性position:sticky可以简单实现,省去了繁琐的计算
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

position:sticky用法

position:sticky 被称为粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。
简单的理解就是:在目标区域以内,它的行为就像 position:relative;在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
可以说是相对定位relative和固定定位fixed的结合
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
position:sticky 使用条件

1、必须指定top、bottom、left、right 4个值之一,否则只会处于相对定位
2、sticky元素仅在其父元素内生效

示例:
CSS position属性sticky,css,css,javascript,前端
我设置当左侧滚动一个格子后,2定位在上方,右侧自然滚动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body,html,.box {
      width: 100%;
      height: 100%;
    }
    .box {
      font-size: 20px;
      overflow: auto;
      display: flex;
    }
    .left {
      width: 200px;
      position: sticky;
      top: -320px;
    }
    .left-box {
      width: 200px;
      height: 300px;
      background-color: #ccc;
      margin-bottom: 20px;
    }
    .right {
      margin-left: 20px;
      flex: 1;
    }
    .right-box {
      width: 100%;
      height: 300px;
      margin-bottom: 20px;
      background-color: forestgreen;
    }
  </style>
</head>
<body>
<div class="box">
  <div class="left">
    <div class="left-box">1</div>
    <div class="left-box">2</div>
    <div class="left-box">3</div>
    <div class="left-box">4</div>
  </div>
  <div class="right">
    <div class="right-box">1</div>
    <div class="right-box">2</div>
    <div class="right-box">3</div>
    <div class="right-box">4</div>
    <div class="right-box">5</div>
    <div class="right-box">6</div>
    <div class="right-box">7</div>
    <div class="right-box">8</div>
    <div class="right-box">9</div>
    <div class="right-box">10</div>
    <div class="right-box">11</div>
    <div class="right-box">12</div>
  </div>
</div>
</body>
</html>

在web开发中注意兼容性:

sticky目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图,基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari文章来源地址https://www.toymoban.com/news/detail-831468.html

到了这里,关于CSS position属性sticky的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(50)
  • css之sticky定位

    1.属性介绍: sticky定位(粘性定位),指的是基于用户的滚动位置来定位,默认情况下它表现就和relative定位一样,但是当页面滚动区域大于你的目标区域(即sticky对应的元素区域)时,它的表现和fixed定位一样。 元素定位也同样需要根据所设定的top,left,right,bottom来呈现。

    2024年02月15日
    浏览(26)
  • 2.前端笔记-CSS-字体属性

    CSS使用font-family属性定义文本的字体系列 建议 :使用英文写字体的属性值,尽量使用系统默认自带字体,保证在任何用户的浏览器都可以显示 微软雅黑-Microsoft YaHei 说明: font-family可以同时赋多个属性值的原因是:如果用户电脑未安装第一种字体,就依次类推用其他字体进行

    2024年02月06日
    浏览(42)
  • 『 前端三剑客 』:CSS常用属性

    一 . CSS常用元素属性 1.1 字体家族和 字体大小 设置的字体需要是 windows 上自带的字体 , 要求是系统中已经安装了的字体 使用 css 设置字体为微软雅黑 和 宋体 , 字体大小为 30 px 和 40 px font - size 设置的是字体的字符框的高度的大小 . 设置效果如下所示 1.2 设置字体粗细 font-we

    2024年02月15日
    浏览(46)
  • 【前端 - CSS】第 18 课 - 背景属性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 ​​​​​​​   目录 1、缘起 2、背景属性 2.1、背景图 2.2、背景图平铺方式  2.3、背景图位置  2.4、背景图缩放  2.5、背景图固定 2.6、背景复合属性 3、总结 

    2024年01月23日
    浏览(58)
  • 【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

    欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解如何设置常用样式属性,包括文本属性、字

    2024年02月11日
    浏览(68)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(43)
  • 【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    前言: 大家好,我是 良辰丫 ,在上一篇文章中我们了解了CSS引入方式,CSS基础选择器,CSS复合选择器,今天我们继续学习CSS的相关知识点.💞💞 🧑个人主页:良辰针不戳 📖所属专栏:零基础学web前端 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的

    2024年02月05日
    浏览(79)
  • 前端编写页面HTML、CSS常用属性方法汇总

    不太常用的属性: box-shadow的: CSS3动画的点: 控制文字行数: CSS3的一些冷知识: @keyframes: HTML5: html+css乱七八糟的: JavaScript:

    2024年02月16日
    浏览(42)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包