页面侧边栏顶部固定和底部固定方法

news2025/1/15 12:59:54

顶部固定用于侧边栏低于屏幕高度----左侧边栏

底部固定用于侧边栏高于屏幕高度----右侧边栏

vue页面方法 

页面布局

页面样式，因为内容比较多， 只展示主要代码

* {
    margin: 0;
    padding: 0;
    text-align: center;
}
.head {
    width: 100%;
    height: 88px;
    background-color: pink
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}
.body {
    display: flex;
    width: 1200px;
    margin: 0 auto;
}
.sidebar_l {
    width: 200px;
    height: 100%;
    background-color: blue
    margin-top: 50px;
    position: sticky;
    /* 定位到导航栏下面 */
    top: 88px;
    left: 0;
}
.content {
    width: 600px;
    margin: 50px;
    background-color: #ccc
}
.sidebar_r {
    width: 300px;
    margin-top: 50px;
}

js

注意生命周期

onMounted(() => {
  // 获取元素
  let sidebar_r: any = document.querySelector('.sidebar_r');
  // 获取元素高度
  let r_h = sidebar_r.offsetHeight;
  // 获取屏幕宽度
  var window_w = window.innerWidth;
  // 获取屏幕高度
  var window_h = window.innerHeight;
  // 宽度至少1200
  window_w < 1200 ? window_w = 1200 : window_w;
  // 获取的屏幕宽度加了滚动条的宽度9px,中间内容的左边加中间是910 - 9,所以加901
  sidebar_r.style.left = ((window_w - 1200) / 2) + 901 + "px";
  // 监听页面滚动
  window.addEventListener("scroll", () => {
    // 获取滚动高度
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 判断高度是否超过屏幕高度 超过就底部固定没有就顶部固定
    if (window_h < r_h) {
      // 判断滚动高度是否超过侧边栏高度(判断侧边栏是否滚动到了底部 侧边栏高度-屏幕高度+头部高度88+上下边距50+20)
      if (scrollTop >= r_h - window_h + 88 + 50 + 20) {
        sidebar_r.style.position = "fixed";
        sidebar_r.style.bottom = "20px";
        sidebar_r.style.top = "auto";
        sidebar_r.style.height = "auto";
      } else {
        sidebar_r.style.position = "static";
      }
    } else {
      sidebar_r.style.position = "sticky";
      sidebar_r.style.top = "88px";
      sidebar_r.style.height = "100%";
      sidebar_r.style.bottom = "auto";
    }
  })
  // 监听页面大小变化
  window.addEventListener("resize", () => {
    // 获取屏幕高度宽度
    window_w = window.innerWidth;
    window_h = window.innerHeight;
    window_w < 1200 ? window_w = 1200 : window_w;
    sidebar_r.style.left = ((window_w - 1200) / 2) + 901 + "px";
  });
})

html原生方法

需要手动计算右边侧边栏高度，可以直接复制运行看效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .head {
            width: 100%;
            height: 88px;
            background-color: pink;
            position: sticky;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .body {
            display: flex;
            width: 1200px;
            margin: 0 auto;
        }

        .sidebar_l {
            width: 150px;
            height: 100%;
            background-color: blue;
            margin-top: 50px;
            position: sticky;
            /* 定位到导航栏下面 */
            top: 88px;
            left: 0;
        }

        .content {
            width: 660px;
            margin: 50px;
            background-color: #ccc;
        }

        .sidebar_r {
            width: 290px;
            margin-top: 50px;
        }

        .box1 {
            width: 100%;
            height: 600px;
            background-color: #0bf349;
        }

        .box2 {
            width: 100%;
            height: 6000px;
            background-color: #27d8f0;
        }

        .box3 {
            width: 100%;
            height: 2000px;
            background-color: #ed9a15;
            position: relative;
        }

        .bottom {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="head">头部</div>
    <!-- 内容区域 -->
    <div class="body">
        <div class="sidebar_l">
            <div class="box1">左边侧边栏</div>
        </div>
        <div class="content">
            <!-- 内容 -->
            <div class="box2">中间内容</div>
        </div>
        <div class="sidebar_r">
            <!-- 内容 -->
            <div class="box3">
                <p>右边侧边栏</p>
                <p class="bottom">右边侧边栏底部</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 获取元素
    let sidebar_r = document.querySelector('.sidebar_r');
    // 获取元素高度 html元素因为父元素使用了flex让子元素的高度都变成了一样高，所以获取不到真实的高度，需要手动计算赋值盒子高度，vue可以通过生命周期获取真实的元素高度
    // let r_h = sidebar_r.offsetHeight;
    let r_h = 2000;
    console.log("右边侧边栏高度：", r_h);
    // 获取屏幕宽度
    var window_w = window.innerWidth;
    // 获取屏幕高度
    var window_h = window.innerHeight;
    // 宽度至少1200
    window_w < 1200 ? window_w = 1200 : window_w;
    // 获取的屏幕宽度加了滚动条的宽度9px,中间内容的左边加中间是910 - 9,所以加901
    sidebar_r.style.left = ((window_w - 1200) / 2) + 901 + "px";
    // 监听页面滚动
    window.addEventListener("scroll", () => {
        // 获取滚动高度
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        // 判断高度是否超过屏幕高度 超过就底部固定没有就顶部固定
        if (window_h < r_h) {
            // 判断滚动高度是否超过侧边栏高度(判断侧边栏是否滚动到了底部 侧边栏高度-屏幕高度+头部高度88+上下边距50+20)
            if (scrollTop >= r_h - window_h + 88 + 50 + 20) {
                sidebar_r.style.position = "fixed";
                sidebar_r.style.bottom = "20px";
                sidebar_r.style.top = "auto";
                sidebar_r.style.height = "auto";
            } else {
                sidebar_r.style.position = "static";
            }
        } else {
            sidebar_r.style.position = "sticky";
            sidebar_r.style.top = "88px";
            sidebar_r.style.height = "100%";
            sidebar_r.style.bottom = "auto";
        }
    })
    // 监听页面大小变化
    window.addEventListener("resize", () => {
        // 获取屏幕高度宽度
        window_w = window.innerWidth;
        window_h = window.innerHeight;
        window_w < 1200 ? window_w = 1200 : window_w;
        sidebar_r.style.left = ((window_w - 1200) / 2) + 901 + "px";
    });
</script>

</html>

计算思路：

高度判断：屏幕高度 - 元素高度 + 顶部离边框的距离

左边定位：屏幕宽度 - 左边元素宽度和间距 + 滚动条宽度

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1519447.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue+SpringBoot打造高校宿舍调配管理系统

Vue+SpringBoot打造高校宿舍调配管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能需求2.1 学生端2.2 宿管2.3 老师端 三、系统展示四、核心代码4.1 查询单条个人习惯4.2 查询我的室友4.3 查询宿舍4.4 查询指定性别全部宿舍4.5 初次分配宿舍 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的…
阅读更多...
数据结构--线性表

数据结构--线性表

1.线性表的定义&#xff1a; 存在唯一的一个被称为“第一个”的数据元素&#xff1b; 存在唯一的一个被称为“最后一个”的数据元素&#xff1b; 除第一个之外&#xff0c;集合中的每一个数据元素都只有一个前驱&#xff1b; 除最后一个之外&#xff0c;集合中的每一个数据…
阅读更多...
安卓百度地图API显示隐藏Marker

安卓百度地图API显示隐藏Marker

方法 BaiduMap.Marker.setVisible(boolean) 实现 List<Marker> list_marker new ArrayList<>(); boolean isShowMarker true;Override public boolean onCreateOptionsMenu(Menu menu) {String[] sm { "显隐信息", "显隐照片", "截…
阅读更多...
【Python】新手入门学习：详细介绍迪米特原则（LoD）及其作用、代码示例

【Python】新手入门学习：详细介绍迪米特原则（LoD）及其作用、代码示例

【Python】新手入门学习&#xff1a;详细介绍迪米特原则&#xff08;LoD&#xff09;及其作用、代码示例 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTor…
阅读更多...
IDEA编译安卓源码TVBox（2）

IDEA编译安卓源码TVBox（2）

一、项目结构&#xff1a;主要app和player app结构 二、增加遥控器按键选台 修改LivePlayActivity.java 1、声明变量 public String channelId "";public Timer timer new Timer();public Toast mToast;2、定义方法 private void mToastShow(String s){mToast …
阅读更多...
数据结构（二）顺序表和链表

数据结构（二）顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使 用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直…
阅读更多...
鸿蒙车载原生开发，拓展新版图

鸿蒙车载原生开发，拓展新版图

一天内连发“五弹”、HiCar 4.0首次上车 华为鸿蒙狂扩“汽车朋友圈”-上游新闻 汇聚向上的力量 3月15日&#xff0c;在“华为云&华为终端云服务创新峰会2024”上&#xff0c;华为首批汽车行业伙伴广汽传祺、岚图汽车、零跑汽车、凯翼汽车加入鸿蒙生态合作&#xff0c;华为…
阅读更多...
C语言：操作符详解（下）

C语言：操作符详解（下）

目录 一、逗号表达式二、下标访问[ ]、函数调用()1. [ ]下标引用操作符2.函数调用操作符 三、结构成员访问操作符1.结构体(1) 结构的声明(2) 结构体变量的定义和初始化 2.结构成员访问操作符(1)结构体成员的直接访问(2)结构体成员的间接访问 四、操作符的属性&#xff1a;优先级…
阅读更多...
搭建谷歌Gemini

搭建谷歌Gemini

前言 Gemini是Google AI于2023年发布的大型语言模型&#xff0c;拥有强大的文本生成、理解和转换能力。它基于Transformer模型架构&#xff0c;并使用了大量文本和代码数据进行训练。Gemini可以执行多种任务&#xff0c;包括&#xff1a; 生成文本&#xff1a;可以生成各种类…
阅读更多...
蓝桥杯2022年第十三届省赛真题-灭鼠先锋

蓝桥杯2022年第十三届省赛真题-灭鼠先锋

LLLV solution1 必输&#xff1a;只有一个格子 手算可以模拟出来~ solution2 OOOO状态下&#xff0c;谁先下谁必输 》问题转化为谁先下满第一排&#xff0c;谁必赢&#xff0c;可以非常容易的模拟出来
阅读更多...
buuctf warmup 超详细

buuctf warmup 超详细

目录 1.代码审计&#xff1a; 2.逻辑分析 3.总结分析 4.分析记录 5.疑点解答 1.代码审计&#xff1a; <?phphighlight_file(__FILE__);class emmm //定义了一个类{public static function checkFile(&$page) 类里面又申明创建…
阅读更多...
稀碎从零算法笔记Day18-LeetCode:移除链表元素

稀碎从零算法笔记Day18-LeetCode:移除链表元素

前言&#xff1a;接近20day的时间&#xff0c;终于来到了链表。 题型&#xff1a;指针、链表 链接&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你…
阅读更多...
UE4_AI_行为树_行为树快速入门指南

UE4_AI_行为树_行为树快速入门指南

声明&#xff1a;学习笔记。 在 行为树快速入门指南 中&#xff0c;你将学会如何创建一个敌方AI&#xff0c;该AI看到玩家后会做出反应并展开追逐。当玩家离开视线后&#xff0c;AI将在几秒钟后&#xff08;这可根据你的需求进行调整&#xff09;放弃追逐&#xff0c;并在场景中…
阅读更多...
P1086 [NOIP2004 普及组] 花生采摘

P1086 [NOIP2004 普及组] 花生采摘

题目描述 鲁宾逊先生有一只宠物猴&#xff0c;名叫多多。这天&#xff0c;他们两个正沿着乡间小路散步&#xff0c;突然发现路边的告示牌上贴着一张小小的纸条&#xff1a;“欢迎免费品尝我种的花生&#xff01;――熊字”。 鲁宾逊先生和多多都很开心&#xff0c;因为花生正…
阅读更多...
xnip滚动截图失效

xnip滚动截图失效

出现问题背景 系统&#xff1a;macos 截图区域&#xff1a;iterm终端 问题原因 截图背景为非纯色背景&#xff0c;我在iterm中的背景设置了图片&#xff0c;即使用图片作为终端背景&#xff0c;而xnip不支持非纯色背景的滚动截图。 解决方法 取消使用图片背景。 引用 滚…
阅读更多...
Linux编译器gcc/g++的功能与使用

Linux编译器gcc/g++的功能与使用

一、程序的生成 首先&#xff0c;我们知道程序的编译分为四步&#xff1a; 1、预处理 2、编译 3、汇编 4、链接 1.1预处理 预处理功能主要包括头文件展开、宏定义、文件包含、条件编译、去注释等。 所谓的头文件展开就是在预处理时候&#xff0c;将头文件内容拷贝至源文…
阅读更多...
算法之二分查找算法

算法之二分查找算法

二分查找算法简介 1. 首先说明二分查找算法是比较恶心, 细节很多, 很容易写出死循环的算法, 但熟悉了之后是最简单的算法. 2. 其次我们可能听说过二分查找的前提是数组有序的前提下进行, 但其实不一定. 3. 二分查找算法有一套模板: 朴素的二分模板: 比较简单, 但是有局限性查找…
阅读更多...
【Office学习】Word参考文献交叉引用之连续引用

【Office学习】Word参考文献交叉引用之连续引用

Word中为实现连续多个参考文献的的引用&#xff0c;如[1-3] 通过交叉引用至内容中的【1】和【3】不必多说&#xff0c;关键问题是如何变成[1-3]&#xff0c;如果强行删掉两边括号&#xff0c;更新后会恢复原样不说&#xff0c;打印或者转为PDF无法识别到删除的修改。 例如 1…
阅读更多...
北斗卫星在桥隧坡安全监测领域的应用及前景展望

北斗卫星在桥隧坡安全监测领域的应用及前景展望

北斗卫星在桥隧坡安全监测领域的应用及前景展望 北斗卫星系统是中国独立研发的卫星导航定位系统&#xff0c;具有全球覆盖、高精度定位和海量数据传输等优势。随着卫星导航技术的快速发展&#xff0c;北斗卫星在桥隧坡安全监测领域正发挥着重要的作用&#xff0c;并为相关领域…
阅读更多...
C++ 网络编程学习五

C++ 网络编程学习五

C网络编程学习五 网络结构的更新单例模式懒汉单例模式饿汉单例模式懒汉式指针智能指针设计单例类 服务器优雅退出asio的多线程模型IOServiceasio多线程IOThreadPoolepoll 和 iocp的一些知识点 网络结构的更新 asio网络层&#xff0c;会使用io_context进行数据封装&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023