黏 MDB Pro component

粘性-Bootstrap 5和Material Design 2.0

粘性是一个组件，它可以将元素锁定在页面的特定区域中。它 通常在导航菜单中使用。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子

要开始使用sticky，只需向要固定的元素添加 .sticky 类

Download MDB

粘底

您可以通过添加将元素固定到底部 data-mdb-sticky-position =“ bottom”

边界

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

外部元素作为边界

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

Stop here

方向

粘性组件的默认方向是 down 。您可以通过设置进行更改 data-mdb-sticky-direction =“ up” 或 data-mdb-sticky-direction =“ both”

Up Down Both

动画

您可以添加一个动画，该动画将在粘滞开始以及粘滞元素为 隐。只需使用指定动画的css类 data-mdb-sticky-animation-sticky 和 data-mdb-sticky-animation-unsticky 属性。

请记住，并非每个动画都合适。我们建议使用 下面的例子。

与导航栏粘在一起

默认情况下，sticky将元素锁定在屏幕边缘。如果您有导航栏元素 在您的网站上，它将隐藏在其后面。您可以通过设置一个 offset 和 delay

黏 - 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';