《如何驾驶你的粘性定位》_粘性定位设置top后到底部-CSDN博客

大家好！直接了当

粘性定位，

在整个页面写好后，我们可以在最后面加上粘性定位，并将位置和滑动范围定制好

如：

<div>
   <ul>
      <li>
      内容
      </li>
   </ul>
</div>

以上只是个盒子

我们可以将这个盒子的宽度设置好，然后将盒子的高度设置的加到好处的高

再将这个盒子div内部的内容ul部，将粘性定位写入ul内部，之后固定底部或是上部

这样一个被固定好的粘性定位盒子就做好了

一下是我写的粘性定位

可供参考

html的样式，一个图是代表主体的

后面的图是粘性定位的图

<!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">
    <link rel="stylesheet" href="../彩票-双色球/css/index.css">
    <title>彩票</title>
</head>

<body>
    <!-- 主体 -->
    <div id="box">
        <!-- 盒子 -->
        <div class="con">
            <!-- 集中 -->
            <img src="../彩票-双色球/img/1.bmp" alt="">
        </div>
    </div>
    <!-- 无关主体联-粘性 -->
    <div class="wm">
        <img src="../彩票-双色球/img/2.bmp" alt="">
    </div>
    <div  class="wa">
        <img src="../彩票-双色球/img/3.bmp" alt="">
    </div>
    <div class="wb">
        <img src="../彩票-双色球/img/4.bmp" alt="">
    </div>
    <div class="wc">
        <img src="../彩票-双色球/img/5.bmp" alt="">
    </div>
</body>

</html>

一下是css的粘性定位方式

以及框架

* {
    margin: 0;
    padding: 0;
}

body {
    width: 1100px;
    margin: auto;
}
/*盒子*/
#box {
    position: absolute;
}
/*秒杀*/
.wm {
    background-color: transparent;
    width: 280px;
    height: 900px;
    margin-left: -300px;
}
.wm>img{
    top: 0px;
    position: sticky;
}
/*二维码*/
.wa {
    margin-top: -600px;
    margin-right: -200px;
    width: 200px;
    height: 800px;
    float: right;
}
.wa>img{
    top: 0px;
    position: sticky;
}
/*客服*/
.wb {
    background-color: transparent;
    float: right;
    margin-right: -1.0px;
    width: 60px;
    margin-top: -600px;
    height: 1800px;
}

.wb>img {
    top: 0px;
    position: sticky;
}

/*标签*/
.wc{
    background-color: transparent;
    width: auto;
    height: 1800px;
    float: right;
    right: 150px;
    margin-top: -400px;
}
.wc>img{
    position: sticky;
    top: 0;
}

一下是粘性定位的标记