js粘性侧边栏插件sticky-sidebar

Sticky Sidebar

可滚动的粘性元素

特点

• 滚动时它不会重新计算所有尺寸，只计算必要的尺寸。

• 超级流畅，不会导致滚动延迟或卡顿，也不会出现页面重排。

• 与调整大小传感器集成以在侧边栏或其容器的大小更改时重新计算插件的所有尺寸。

• 它在每个词缀类型上都有事件触发器，可以在特定情况下挂钩您的代码。

• 与容器的其余部分相比高或太短时，请处理侧边栏。

• 零依赖和超级简单的设置。

用法

您网站的 html 结构必须与此类似才能正常工作：

<div class="main-content">
    <div class="sidebar">
        <div class="sidebar__inner">
            <!-- 内容在这里-->
        </div>
    </div>
    <div class="content">
        <!-- 内容在这里-->
    </div>
</div>

请注意，内部侧边栏包装器 .sidebar__innner 是可选的，但强烈推荐，如果您不自己编写，脚本将在类名内包装器粘滞下为您创建一个。但这可能会导致很多问题。

对于上面的示例，您可以使用以下 JavaScript：

<script type="text/javascript" src="./js/sticky-sidebar.js"></script>

<script type="text/javascript">
  var sidebar = new StickySidebar('.sidebar', {
    topSpacing: 20,
    bottomSpacing: 20,
    containerSelector: '.main-content',
    innerWrapperSelector: '.sidebar__inner'
  });
</script>

通过 jQuery/Zepto

您可以将粘性侧边栏配置为 jQuery 插件，只需包含 jquery.sticky-sidebar.js 而不是 sticky-sidebar.js 文件，而不是将其配置为任何 jQuery 插件。

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.sticky-sidebar.js"></script>

<script type="text/javascript">
  $('#sidebar').stickySidebar({
    topSpacing: 60,
    bottomSpacing: 60
  });
</script>

确保在 jquery.js 之后包含 sticky-sidebar.js 脚本文件。

浏览器支持

粘性侧边栏适用于所有现代浏览器，包括 Internet Explorer 9 及更高版本，但如果您希望它与 IE9 一起使用，则应在粘性侧边栏代码之前包含 requestAnimationFrame polyfill。

PREVIOUS:
NEXT:
jQuery滑动手风琴效果
纯CSS背景循环滚动动画