【css样式】postion:sticky页面实现一侧固定一侧滚动的效果，到底部后一起滚动

简单Janeee

已于 2023-03-02 17:12:21 修改

阅读量1.5k

点赞数

分类专栏：小tips 文章标签： css 前端 html

于 2022-12-26 18:08:10 首次发布

本文链接：https://blog.csdn.net/liqiannan8023/article/details/128447546

版权

小tips 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

position的定位类型

position的定位类型

static：默认值，没有定位，遵循正常的文档流
fixed：固定定位，元素的位置是相对于浏览器窗口
relative：相对定位，相对于其正常的位置，移动元素，其原本所占空间不会改变
absolute：绝对定位，相对于自己最近已定位的父级元素，如果没有已定位的父级元素，则相对于html（一般子绝父相结合使用）
sticky：粘性定位，基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
所实现的效果，在头部的时候两块内容相同高度

在这里插入图片描述
在中间的时候，高度更高的进行滑动，相对矮的不动（如果两侧的内容均超出屏幕高度，则两者同时动，直到相对矮（此例中默认左侧为相对矮的一侧）的到底部为止）

在底部的时候两者相同高度，在底部一起滑动
在这里插入图片描述

<!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>一侧固定一侧滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 80%;
            margin: 0 auto;
        }

        .clearfix::after {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
        }

        .conetnt {
            padding: 2%;
            border: 1px solid #eee;
            margin-bottom: 200px;
            box-sizing: border-box;
        }

        .left {
            height: 3000px;
            width: 60%;
            margin: 0 2%;
            float: left;
            background-color: pink;
        }

        .right {
            height: 800px;
            width: 35%;
            float: right;
            background-color: purple;
            /*对右边的内容使用粘性定位*/
            position: sticky;
            /* top: -200px; */
        }

        .footer {
            width: 100%;
            height: 500px;
            background-color: #000;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="conetnt clearfix">
            <div class="left">wwwwwww</div>
            <div class="right">
                q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  q<br>  
            </div>
        </div>

        <div class="footer">

        </div>
    </div>

</body>

</html>
<script>
    //获得页面卷曲的内容
    //获得浏览器的内部高度
    let ScreenTop = window.innerHeight;
    //获取滚动元素的高度
    let divTop = document.querySelector(".right").offsetHeight;
    let tops = divTop - ScreenTop;
    console.log("tops", tops);
    if (tops <= 0) {
        document.querySelector(".right").style.top = 0 + "px"

    } else {
        document.querySelector(".right").style.top = -tops + "px"
    }


</script>

简单Janeee

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【css样式】postion:sticky页面实现一侧固定一侧滚动的效果，到底部后一起滚动

在中间的时候，高度更高的进行滑动，相对矮的不动（如果两侧的内容均超出屏幕高度，则两者同时动，直到相对矮（此例中默认左侧为相对矮的一侧）的到底部为止）absolute：绝对定位，相对于自己最近已定位的父级元素，如果没有已定位的父级元素，则相对于html（一般子绝父相结合使用）relative：相对定位，相对于其正常的位置，移动元素，其原本所占空间不会改变。fixed：固定定位，元素的位置是相对于浏览器窗口。static：默认值，没有定位，遵循正常的文档流。所实现的效果，在头部的时候两块内容相同高度。
复制链接

扫一扫