npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

arale-sticky

v1.4.0

Published

实现元素跟随滚动的效果。

Downloads

3

Readme

Sticky


Build Status Coverage Status

实现侧边栏跟随滚动的效果,当滚动条滚动到一定距离时,指定区域变为 sticky 效果开始跟随页面。

例如 brunch.iobootstrap 页面左边侧边栏的效果,或着请看 演示

实现原理是支持 position: sticky 的直接使用 CSS 实现, 不支持的浏览器(除 IE6 外)使用 position: fixed,对 IE6 进行 js 模拟。

arale/fixed 改名为 arale/sticky


使用说明

Sticky(element, position, callback)

seajs.use(["$", "sticky"], function($, sticky) {
    sticky("#stick", 30, function(status) {
        if (status) {
            seajs.log("stick");
        } else {
            seajs.log("unstick");
        }
    });
});

element 是指需要跟随滚动的目标元素,接受 jQuery selector 对象。

position 位置对象, 取:

{
    top: 10,
    bottom: 10
}

设置 top 或者 bottom, 指当元素距离当前可视窗口顶部或底部的距离等于这个值时, 开始触发跟随状态. 当 position 取一整型数值时, 等价于 position{ top: x }

callback 当元素更改状态之后的回调函数, 具有一个参数 status, 为 true 表示是 stick 状态, 为 false 为 unstick 状态.

有几下三点注意:

  1. position.top 设置的值超过元素本身在文档中的高度时, 就变为全局 fixed 效果

  2. Sticky 对某些情况下的元素会向 DOM 中插入占位元素, 所以务必在 DOM ready 之后初始化该组件

  3. 对于 position: static or relativedisplay 不为 none 的情况下, 会在当前元素后面插入宽高与元素相同的占位符.

返回为 Sticky 实例对象, 具有以下成员和方法:

  • this.elem 当前元素, 即上述的 element

  • this.adjust() 用于当 sticky 元素被动改变位置时, 导致其 offsetTop 改变, 从而需要手工调用该方法来调整 sticky 元素状态. 自动检测元素位置改变实现太复杂, 这里简略处理.

Sticky.fixed(element)

seajs.use(["sticky"], function(sticky) {

    sticky.fix("#element-need-to-fixed");

});

element 是指需要 fixed 的目标元素,接受 jQuery selector 对象。

注意: 请自行设置元素的 left, top 等 CSS 属性。