Angular ui-utils 滚动修复答案

【问题标题】：Angular ui-utils scrollfixAngular ui-utils 滚动修复
【发布时间】：2014-06-26 04:59:04
【问题描述】：

我想用ui-Utils module: scrollfix 让<div> 从 100px 开始，如果我向下滚动，它应该固定在 0px。

<div ui-scrollfix="+100">test</div>

在 scrollfix 演示网站上有一个提示框，上面写着：

请记住，该指令仅向元素添加 ui-scrollfix 类。您可以添加相应的 CSS 规则，但是如果您愿意，它也可以让您添加其他规则。

即使在演示页面上，它也无法正常工作.... 或者我期待有什么问题。

【问题讨论】：

【解决方案1】：

您是否设置了正确的 CSS？我知道您还必须为 ui-scrollfix 设置类。

【讨论】：

【解决方案2】：

**如果这更容易的话，这里有一个 plunker :) ** http://run.plnkr.co/plunks/FN4s5U9JEFG1VXzy7azQ/

确保 Angular 已引导并运行；
1. 去如下url获取js：https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/scrollfix.js
2. 从模块对象中剥离指令并将它们写入你自己的已经被提升的模块中（在 html 中：ng-app="sampleApp"/ 在 js 中：sampleApp.directive(...)
3. 粘贴以下 html 作为您放置 ng-app 指令的元素的子元素：（必须编写时髦的链接才能通过堆栈获取它） https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/demo/index.html
将以下样式元素内联粘贴到您刚刚放置的 html 中（内联样式仅用于示例目的）：

.ui-滚动修复{ 背景：绿色；宽度：100%；位置：固定；顶部：0；左：0； }

6.享受 FIXED HEADER（元素看起来很时髦，因为您已将 position:fixed 应用于其中两个，但这只是为了让您启动并运行）

【讨论】：

【解决方案3】：

正如你提到的滚动修复演示网站上的提示所说：

请记住，该指令仅向元素添加 ui-scrollfix 类。您可以添加相应的 CSS 规则，但如果您愿意，也可以添加其他规则。

因此，此指令的工作方式是，只要达到滚动条件，就会将单个 CSS 类 ui-scrollfix 添加到元素中，而在其他情况下（当您滚动回顶部时）会删除该类。因此，您有责任添加 正确的 CSS 样式。

您可以通过向元素添加另一个类或 CSS id 并为这两种情况定义正确的 CSS 样式来实现这一点 - 正常的一种，以及向下滚动时固定的一种。例如，您可以在代码中包含这样的内容：

<div ui-scrollfix="+100" class="yourclass">test</div>

它可以在这个正常状态应用任何样式：

.yourclass {
    /* your CSS code, 100px from the top of the page */
}

当ui-scrollfix 条件触发时（在本例中，我们将其设置为+100，因此当页面滚动在您的元素之后100 像素时），您的<div> 元素将添加另一个类：

<div ui-scrollfix="+100" class="yourclass ui-scrollfix">test</div>

您可以使用它来设置正确的 CSS 样式：

.yourclass.ui-scrollfix {
    position:fixed;
    top:0;
}

Here is a demo 使用顶部导航栏上的指令，该指令绝对位于页面顶部的100px，并且当您向下滚动时，它会固定在页面顶部。同样，第二个（标题为“第二个导航栏”）位于顶部的下方。我用于顶栏的 CSS 代码是：

.navbar-fixed-top {
    position:absolute;
    top:100px;
}

.navbar-fixed-top.ui-scrollfix {
   position: fixed;
   top:0;
}

另外，我认为重要的是要提到ui-scrollfix="+100" 意味着当视口顶部在元素之后滚动100px 时，ui-scrollfix 类将被添加到元素中。如果您希望元素在到达视口顶部时获得ui-scrollfix CSS 类，您可以添加ui-scrollfix="+0"。

希望这会有所帮助。

【讨论】：