sticky-sidebar.js 滚动悬浮固定元素插件，常常用在导航条上-BFW插件库

sticky-sidebar.js 滚动悬浮固定元素插件，常常用在导航条上

sticky-sidebar.js 滚动悬浮固定元素插件，常常用在导航条上，依赖ResizeSensor

第一步引入bfwone，加载依赖项ResizeSensor（窗口大小改变侦测插件）

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=ResizeSensor&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["sticky-sidebar"], function() {
                var stickySidebar = new StickySidebar('#sidebar', {
                    bottomSpacing: 20,
                    topSpacing: 20,
                    containerSelector: '.container',
                    innerWrapperSelector: '.sidebar__inner'
                });
            });
        });
    </script>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
        }

        header {
            color: #888;
        }

        header h1 {
            font-size: 30px;
        }

        .container {
            max-width: 700px;
            margin: 0 auto;
        }

        #content {
            border: 1px dotted green;
            padding: 18px;
            margin-left: 215px;
            min-height: 600px;
            color: darkgrey;
        }

        #sidebar {
            float: left;
            width: 200px;
            color: #ce8888;
            will-change: min-height;
        }

        #sidebar .sidebar__inner {
            border: 1px dotted red;
            background-color: rgba(255, 0, 0, 0.01);
            padding: 10px;
            position: relative;
            transform: translate(0, 0);
            transform: translate3d(0, 0, 0);
            will-change: position, transform;
        }

        footer {
            height: 150px;
            height: 85vh;
            border: 1px dotted black;
            margin-top: 20px;
            text-align: center;
            color: #8e8d8d;
            line-height: 150px;
            line-height: 95vh;
            background: rgba(0, 0, 0, 0.02);
        }

        footer p {
            margin: 0;
        }

        .clearfix:after {
            display: block;
            content: "";
            clear: both;
        }
    </style>

</head>
<body>
    <header>
        <div class="container">
            <h1>滚动鼠标，下面的元素会悬浮</h1>
        </div>
    </header>

    <div class="container clearfix">
        <div id="sidebar">
            <div class="sidebar__inner">
                <p>
                    这个就是悬浮固定的列
                </p>
            </div>
        </div>
        <div id="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.
            </p>

            <p>
                In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.
            </p>

            <p>
                Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.
            </p>
        </div>
    </div>

    <footer>
        <p>
            Very Tall Footer
        </p>
    </footer>
</body>
</html>

官方地址 https://abouolia.github.io/sticky-sidebar/