CSS position定位(fixed、sticky)

CSS position 属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。CSS position属性默认为 静态static,除此之外还有相对定位relative,绝对定位absolute,固定定位fixed,粘性定位sticky。本文通过一个实际场景来分析一下 fixed,sticky 的区别。

fixed 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

sticky 粘性定位,该定位基于用户滚动的位置(原来的位置)。它的行为就像 position:relative; 它会悬浮在目标位置。

如果定位的元素是以窗口为参照,那么fixed定位可能比较合适;如果元素是要在父容器(一般小于窗口宽度)中滚动一段距离悬浮,那么使用sticky可能比较容易。

场景描述

页面需要有一个工具条-fixed_bar,当容器内部向上滚动时需要悬浮在容器顶部,分别使用fixed,sticky实现,如下图所示:

使用fixed定位发现fixed_bar超出了父级容器的宽度(即使已经设置fixed_bar的宽度为父级的100%),如果想让fixed_bar宽度为父级的100%,而且父级容器在向上滚动的时候,你还需要在scroll事件中动态改变fixed_bar的top值 —— 可谓“麻烦的一匹”。反观sticky定位可以完美满足你的要求,这应该是它出现的原因。

<template>
    <div>
        <div class="p_wrapper" @scroll="handleScroll">
            <div style="height: 50px;line-height: 50px;background-color: rgba(227,92,64,0.72)">
                something...
            </div>
            <div class="fixed_bar">
                fixed_bar
            </div>
            <div style="height: 1000px;line-height: 1000px;background-color: rgba(12,65,40,0.32);">
                content...
            </div>
        </div>
        <div class="p_wrapper">
            <div style="height: 50px;line-height: 50px;background-color: rgba(227,92,64,0.72)">
                something...
            </div>
            <div class="sticky_bar">
                sticky_bar
            </div>
            <div style="height: 1000px;line-height: 1000px;background-color: rgba(12,65,40,0.32);">
                content...
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "position",
    mounted() {
        this.fixed = document.querySelector('.fixed_bar')
    },
    data() {
        return {
            fixed: '' // fixed_bar
        }
    },
    methods: {
        handleScroll(e) {
            console.log(e.target.scrollTop, this.fixed.style.top)
            if (e.target.scrollTop > 50) {
                this.fixed.style.top = '50px'
            } else {
                this.fixed.style.top = 100 - e.target.scrollTop + 'px'
            }
        }
    }
}
</script>

<style scoped>
.p_wrapper {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    width: 70%;
    margin: 50px auto;
    max-height: 300px;
    overflow-y: auto;
    text-align: center;
    color: #fff;
}

.fixed_bar {
    height: 50px;
    background-color: rgba(111, 66, 193, 1);
    line-height: 50px;
    position: fixed;
    top: 100px;
    width: 100%;
}

.sticky_bar {
    height: 50px;
    background-color: rgba(111, 66, 193, 1);
    line-height: 50px;
    position: sticky;
    top: 0;
}
</style>

 

相关推荐

  1. CSS定位

    2023-12-29 14:10:01       34 阅读
  2. CSS:定位

    2023-12-29 14:10:01       28 阅读
  3. css---定位

    2023-12-29 14:10:01       21 阅读
  4. CSS<span style='color:red;'>定位</span>

    CSS定位

    2023-12-29 14:10:01      17 阅读
  5. Position定位

    2023-12-29 14:10:01       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-29 14:10:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-29 14:10:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-29 14:10:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-29 14:10:01       20 阅读

热门阅读

  1. 2706. 购买两块巧克力

    2023-12-29 14:10:01       37 阅读
  2. 图像匹配SATD

    2023-12-29 14:10:01       29 阅读
  3. Docker Harbor私有镜像image仓库安装

    2023-12-29 14:10:01       41 阅读
  4. 出版实务 | 工具书

    2023-12-29 14:10:01       32 阅读
  5. C练习——一元二次方程求解

    2023-12-29 14:10:01       38 阅读
  6. 当 ML 遇到 DevOps:如何理解 MLOps

    2023-12-29 14:10:01       36 阅读
  7. js获取文件夹中的所有文件和子文件夹

    2023-12-29 14:10:01       30 阅读
  8. linux shell脚本分享!一个系统信息查询的工具箱

    2023-12-29 14:10:01       39 阅读
  9. C++基础普及:如何学好常用的数据结构

    2023-12-29 14:10:01       48 阅读
  10. (C)一些题19

    2023-12-29 14:10:01       29 阅读
  11. python字符串编码解码基础知识

    2023-12-29 14:10:01       36 阅读