背景
在网页开发中，固定在页面顶部或底部的元素非常常见。如果我们希望一个元素在滚动页面时位置定位在某个固定位置，一般的处理方式是通过CSS设置position:fixed实现。但是，这种方法有些局限，比如在某些情况下我们需要固定元素在一个父元素内部，这时候使用 position:fixed 将不再是最佳选择。
在这种情况下，我们可以使用 ng2-affix 来满足需求。ng2-affix 是一个 Angular2+ 的小型库，它可以让一个元素相对于其父元素固定。在这篇文章中，我们将介绍如何使用ng2-affix。
安装
我们可以使用 npm 安装 ng2-affix。在命令行中输入：
--- ------- ---------
引入
首先，我们需要在我们的项目中引入 ng2-affix。
在模块中引入
我们将 ng2-affix 引入到模块中。打开 app.module.ts 文件并添加一个 import 语句。
------ - ----------- - ---- ------------
为了使它能够被指令和组件使用，我们还需要把 AffixModule 添加到我们的 imports 数组中。
-----------
-------- -
--------------
------------
-----------
-----------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -ng2-affix Directive (指令)
在 Angular2+ 中，我们经常使用 指令 (Directives) 来实现特定的功能。ng2-affix 实现了一个名为 ngAffix 的 __指令 (Directive)__。在使用时，ng-affix 只需在 HTML 元素上使用即可。
---- ------- ----------------- ---- ------ -- ------------
属性
affixTop: 定义了离父元素顶部多少距离时激活滚动固定效果。属性值应该是一个大于或等于0的数字。如果不设置，默认值为0。
事件
affix: 当元素被固定时触发。affix-top: 当元素回到顶部时触发。
示例代码
下面是一个简单的使用 ng2-affix 的例子。我们需要一个 HTML 页面和一个 Angular2+ 组件。
示例 HTML
---- ------------------
---- ------------
---- -----------------
---- --------
----------------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ---- ----- -- ---- --------- ------- --- ----- ------- ------ -- ------- --- -- ---- -------- -- ------- ---- ---------- ---------- -------- -------- ---------- ------ ----- ----- -- ---- -------- ------- --- -- ----- --- ---------- ------- -- -- -----------
------
------
---- -----------------
-------- ------------
------
------
------示例 组件
添加 ngAffix 指令后，需要在组件中添加一些额外的代码。
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
---- ------------------
---- ------------
---- -----------------
---- --------
----------------
-------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ---- ----- -- ---- --------- ------- --- ----- ------- ------ -- ------- --- -- ---- -------- -- ------- ---- ---------- ---------- -------- -------- ---------- ------ ----- ----- -- ---- -------- ------- --- -- ----- --- ---------- ------- -- -- -----------
------
------
---- -----------------
-------- ------------
------
------
------
-
--
------ ----- ------------ -
-结论
ngAffix 这个指令非常简单实用，既能让我们快速解决页面布局中的固定元素问题，又非常易于使用。在我们对于 ng2-affix 有了更深入的了解后，相信使用起来会更加得心应手。
参考文献
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005578281e8991b448d4826