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

文章目录

  • position的定位类型

position的定位类型

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

所实现的效果,在头部的时候两块内容相同高度

在这里插入图片描述
在中间的时候,高度更高的进行滑动,相对矮的不动(如果两侧的内容均超出屏幕高度,则两者同时动,直到相对矮(此例中默认左侧为相对矮的一侧)的到底部为止)
【css样式】postion:sticky页面实现一侧固定一侧滚动的效果,到底部后一起滚动_第1张图片
在底部的时候两者相同高度,在底部一起滑动
【css样式】postion:sticky页面实现一侧固定一侧滚动的效果,到底部后一起滚动_第2张图片

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">wwwwwwwdiv>
            <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>

你可能感兴趣的:(小tips,css,前端,html)