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

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

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

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;
}

注意生命周期

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>

计算思路：

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！