@512ks/ngsticky 中文文档教程

Question

Angular Sticky

一个简单、纯 javascript（不需要 jQuery！）AngularJS 指令，使元素在向下滚动时保持不变。

Features

• Allows use of an offset so elements can be stuck to eg. 50px from the top of the browser
• Recalculates element position on page load and on window resize
• Clean: No external CSS or jQuery required, and it only adds the classes you specify.

Bower

使用 bower 安装：

bower install ngSticky

Usage

在页面中包含 .js 文件，然后通过包含“sticky”模块启用该指令 作为依赖。 使用指令如下：

<div sticky> Hey there! </div>

要切换元素粘性，您可以使用禁用粘性（ng-model）绑定范围，如下所示 {{ disabled = true }}：

<div sticky disabled-sticky="disabled"> I won't stick! </div>
<div sticky disabled-sticky="!disabled"> I will stick! </div>

使元素粘在屏幕顶部的特定偏移量，您可以提供如下偏移量：

<div sticky offset="100"> I won't touch the top of your screen! </div>

默认情况下，元素将替换为占位符以防止 DOM 调整大小。 这可以禁用如下：

<div sticky use-placeholder="false">I won't be replaced!</div>

如果你想在元素粘滞时自定义样式，我们也有一个 api 给你：

<div sticky offset="100" sticky-class="imSoSticky"> Taste my glue! </div>

如果你想在元素粘滞时自定义主体样式：

<div sticky offset="100" body-class="somethingIsSticky"> Taste my glue! </div>

如果你想添加当元素被限制并触底时的类：

<div sticky offset="100" bottom-class="cantGoAnyFurther"> Taste my glue! </div>

也可以专门为非粘性元素设置样式：

<div sticky unsticky-class="container--unsticky"></div>

为了基于媒体查询启用粘性：

<div sticky media-query="min-width: 768px"> Won't be sticky on small screens! </div>

如果您希望粘性元素仅在小于窗口时才可滚动inner height 然后你可以设置 stick-limit 属性：

<div sticky offset="100" stick-limit="true"> Will stick only if the element isn't bigger then the view</div>

如果你想将一个元素限制在它的父级，并让它“触底”，只需添加 confine attribute:

<div sticky offset="100" confine="true"> Will unstick and stick to bottom of parent element</div>

注意：confine 属性会自动为其父元素分配一个 position: relative 样式，以帮助相对于父元素进行绝对定位。

如果您想使用元素的 overflow-y 而不是窗口滚动条。 您可以使用“sticky-scroll”元素来表示设计用于处理此问题的元素。

<sticky-scroll style="overflow-y: scroll;min-height: 1000px;display: block;">
  <div sticky>Will stick to element, instead of window scrollbar.</div>
</sticky-scroll>

注意：这不适用于触底或位置绝对元素。

Development

启动开发服务器：

npm run examples
// Then go to localhost:8080

要创建缩小的 dist/sticky.min.js 文件，请运行：

npm run build

Cheers。