黏 MDB Pro component
粘性-Bootstrap 5和Material Design 2.0
粘性是一个组件,它可以将元素锁定在页面的特定区域中。它 通常在导航菜单中使用。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
要开始使用sticky,只需向要固定的元素添加 .sticky
类
粘底
您可以通过添加将元素固定到底部
data-mdb-sticky-position =“ bottom”

边界
设置 data-mdb-sticky-boundary =“ true”
,以便粘性仅在父级内部起作用
元件。记住要设置正确的父母身高。

外部元素作为边界
您可以将元素选择器指定为粘性边界。

方向
粘性组件的默认方向是 down
。您可以通过设置进行更改
data-mdb-sticky-direction =“ up”
或
data-mdb-sticky-direction =“ both”
动画
您可以添加一个动画,该动画将在粘滞开始以及粘滞元素为
隐。只需使用指定动画的css类
data-mdb-sticky-animation-sticky
和
data-mdb-sticky-animation-unsticky
属性。
请记住,并非每个动画都合适。我们建议使用 下面的例子。

黏 - API
用法
通过CSS类
<p class="sticky">例</p>
通过JavaScript
const sticky = document.querySelector('.sticky');
const stickyInstance = new mdb.Sticky(sticky);
通过jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
$('.sticky').sticky();
选件
Name | Type | Default | Description |
---|---|---|---|
stickyActiveClass
|
String | '' |
Set custom active class |
stickyAnimationSticky
|
String | '' |
Set sticky animation |
stickyAnimationUnsticky
|
String | '' |
Set unsticky animation |
stickyBoundary
|
Boolean | false |
set to true to stop sticky on the end of the parent |
stickyDelay
|
Number | 0 |
Set the number of pixels beyond which the item will be pinned |
stickyDirection
|
String | 'down' |
Set the scrolling direction for which the element is to be stikcky |
stickyMedia
|
Number | 0 |
Set the minimum width in pixels for which the sticky should work |
stickyOffset
|
Number | 0 |
Set the distance from the top edge of the element for which the element is sticky |
stickyPosition
|
String | 'top' |
Set the edge of the screen the item should stick to |
方法
Name | Description | Example |
---|---|---|
active |
start sticky manually |
sticky.active()
|
inactive
|
stop sticky manually |
sticky.inactive()
|
const myStickyEl = document.getElementById('sticky')
const sticky = new mdb.Sticky(myStickyEl)
sticky.inactive();
大事记
Name | Description |
---|---|
active.mdb.sticky
|
This event fires immediately when sticky start |
inactive.mdb.sticky
|
This event fires immediately when sticky stop |
const myStickyEl = document.getElementById('sticky')
myStickyEl.addEventListener('active.mdb.sticky', (e) => {
// do something...
})
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Sticky } from 'mdb-ui-kit';