logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Form 表单Breadcrumb 面包屑
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Affix 固钉

将页面元素钉在可视范围。

何时使用

当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。

页面可视范围过小时，慎用此功能以免遮挡页面内容。

固定在顶部

固定在底部

黏着在顶部

当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。.sticky-top 工具类利用的是 CSS 的 position: sticky 属性，并非所有浏览器都支持该属性。

响应式布局

<div class="sticky-sm-top">
当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的顶部
</div>
<div class="sticky-md-top">
当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的顶部
</div>
<div class="sticky-lg-top">
当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的顶部
</div>
<div class="sticky-xl-top">
当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的顶部
</div>