jQuery滚动固定侧边栏元素插件Sticksy.js

jQuery滚动固定侧边栏元素插件Sticksy.js

Sticksy.js是一款jQuery滚动固定侧边栏元素插件。该插件可以在页面滚动时,将任意元素固定在页面的可视区域中,跟随页面一起滚动。

使用方法

安装

1
2
npm install sticksy --save
yarn add sticksy

HTML结构

1
2
3
4
5
6
7
8
9
<aside class="sidebar">
    <!-- Non sticky element -->
    <div class="widget"></div>
    <!-- Sticky element -->
    <div class="widget is-sticky"></div>
    <!-- Now, the next elements are sticky also -->
    <div class="widget"></div>
    <div class="widget"></div>
</aside>

初始化插件

1
var stickyElement = new Sticksy('.widget.is-sticky');

作为jQuery插件使用。

1
var stickyElement = $('.widget.is-sticky').sticksy();

API

1
2
3
4
5
6
7
var instance = new Sticksy(target[, options]);
 
// demo
var stickyEl = new Sticksy('.block.is-sticky', {
    topSpacing: 60, // Specify this when you have a fixed top panel
    listen: true, // Listen for the DOM changes in the container
});

可用的配置参数如下:

  • topSpacing:指定元素被固定时,距离页面顶部的距离。默认为0。
  • listen:是否监听dom元素的变化。默认为false。
温馨提示:此处内容需要评论本文后才能查看。
2

发表评论