css3新属性 position: sticky,实现粘性定位

作者: tww844475003 分类: 前端开发 发布时间: 2022-10-22 12:15

在项目开发中,我们经常遇到这样的需求:

由于浏览器的屏幕区域有限,而承载的内容越来越多。经常会需求当滚动区域过了后,希望把重要信息(表头、菜单、栏目等)固定浮动,方便阅读信息。

以往的做法:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>position sticky</title>
</head>
<style>
  .header {
    width: 100%;
    background: #f6d565;
    padding: 25px 0;
  }
  .sticky {
    position: fixed;
    top: 0;
  }
</style>

<body>
  <div style="height: 200px;">上面内容</div>
  <div class="header">浮动内容</div>
  <div style="height: 1200px;">下面内容</div>
</body>
<script>
  var header = document.querySelector('.header');
  var originOffsetY = header.offsetTop;//获取该元素初始的距父元素顶部的高度
  function onScroll(e) {
    window.scrollY >= originOffsetY///屏幕顶部到页面顶部的距离大于获取的原始值
      ? header.classList.add('sticky')
      : header.classList.remove('sticky')
  }
  document.addEventListener('scroll', onScroll)
</script>

</html>

必须js监听原生事件才能完成效果。

css3新属性 position: sticky,它的表现类似position:relativeposition:fixed 的合体,当目标区域在屏幕中可见时,它的行为就像position:relative;当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。(注意:top和left优先级分别大于bottom和right)

position: sticky 使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>position sticky</title>
</head>
<style>
  .header {
    width: 100%;
    background: #f6d565;
    padding: 25px 0;
    position: sticky;
    top: 0;
  }
</style>

<body>
  <div style="height: 300px;">上面内容</div>
  <div class="header">浮动内容</div>
  <div style="height: 1200px;">下面内容</div>
</body>

</html>
  • 语法
position: sticky;
top: 0;
  • 特点
  1. 浏览器的可视窗口为参照点移动元素
  2. 粘性定位占有原来的位置
  • 注意(生效条件)
  1. 必须添加 top, left, right, bottom 其中一个才有效
  2. 父元素 overflow: auto|scroll|hidden,必须 overflow: visible
  3. 父元素高度必须大于 sticky元素高度
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注