stycky粘性定位

最新推荐文章于 2025-12-31 21:11:58 发布

原创最新推荐文章于 2025-12-31 21:11:58 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

该文章展示了如何在React组件中使用CSS实现一个粘性定位(sticky)的效果。通过设置`.x2`的`position:sticky`和`top:0`，创建了一个在页面滚动时始终保持在顶部的元素。同时，文章还涉及到其他CSS属性如边框、内边距以及盒模型的运用。

import React from "react";
import './styles.less'
export default function Stycky(props) {
    return (
        <div styleName="x1">
            <div styleName="x4">
                <div styleName="x2">x2</div>
                <div styleName="x3"></div>
            </div>
        </div>
    )
}

.x1 {
  border: 10px #f00 solid;
  height: 1500px;
  .x4 {
    margin: 200px 0 0 0;
    border: 10px solid #000;
    height: 500px // 加上之后就不好使了!;;
    // overflow: hidden;
  }
  .x2 {
    position: sticky;
    top: 0;
    background: pink;
    height: 50px;
  }
  .x3 {
    height: 200px;
    background: #999;
    border: 10px solid #0f0;
    box-sizing: border-box;
  }
}