stickybits.js 一款滚动悬浮固定元素插件-BFW插件库

stickybits.js 一款滚动悬浮固定元素插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["stickybits.min"], function() {
                var stickybit = stickybits('.child-1');
            });
        });
    </script>
    <style>
        body,
        html {
            color: white;
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            text-align: center;
            h1 {
            margin-bottom: 0;
        }
    }
    a {
        color: black;
        text-decoration: none;
        &: hover {
        text-decoration: underline;
    }
}
main {
    counter-reset: div;
    display: flex;
    height: 100%;
    justify-content: space-between;
    max-width: 100vw;
    min-height: 2000px;
    position: absolute;
    top: 100px;
    width: 100%;
}
.child {
    padding: 1rem 0;
    text-indent: 1rem;
    width: 100%;
}
.parent {
    height: 300px;
    position: relative;
    width: 100%;
}
.parent:nth-child(odd) {
    background: tan;
}
.parent:nth-child(odd) .child {
    background-color: red;
}
.parent:nth-child(even) {
    background: aqua;
}
.parent:nth-child(even) .child {
    background-color: green;
}
.parent:before {
    counter-increment: div;
    content: 'Parent 'counter(div);
    left: 1rem;
    position: absolute;
    top: 1rem;
    z-index: 2;
}
.child.js-is-sticky {
    top: 0;
}
.child.js-is-stuck {
    bottom: 0;
}
</style>
</head>
<body>
<header class="header">
<a href="" class="header__link">
<h1 class="header__title">Stickybits</h1>
<p>
Check out Stickbits on Github
</p>
</a>
</header>
<main id="main" class="main">
<div id="parent-1" class="parent parent-1">
<div id="child-1" class="child child-1">
<p>
Child 1
</p>
</div>
</div>
</main>
</body>
</html>

官方地址 https://github.com/dollarshaveclub/stickybits