Question

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

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

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

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

即使在那里的演示页面上它也没有真正起作用.... 或者我预计会出现问题。

Answer 1

正如您所说，scrolllfix演示网站上的提示说：

请记住，此指令仅向元素添加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，因此当页面滚动在元素之后100px时），您的<div>元素将有另一个上课：

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

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

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

Here is a demo使用顶部导航栏上的指令，它从页面顶部绝对定位100px，当您向下滚动时，它保持固定在页面顶部。同样，第二个（标题为＆＃34;第二个Navbar＆＃34;）位于顶部下方。我用于顶栏的CSS代码是：

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

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

另外，我认为提及ui-scrollfix="+100"意味着当视口顶部在ui-scrollfix之后滚动100px时，ui-scrollfix类将被添加到元素中，这一点非常重要。元件。如果您希望获取ui-scrollfix="+0" CSS类的元素到达视口顶部，则可以添加{{1}}。

希望这有帮助。

Answer 2

**如果这更容易，那么这里是一名傻瓜:) ** http://run.plnkr.co/plunks/FN4s5U9JEFG1VXzy7azQ/

确保Angular已自举并正在运行;
1. 转到以下网址获取js：https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/scrollfix.js
2. 从模块对象中删除指令并将它们写入您自己的已经提升的模块中（在html中： ng-app =＆＃34; sampleApp＆＃34; /在js：sampleApp.directive中（...）
3. 将以下html粘贴为您放置ng-app指令的元素的子元素:( 必须编写链接funky以通过堆栈） HTTPS：\ // github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/demo/index.html
将以下样式元素内嵌到刚刚放置的html中（内联样式仅用于示例目的）：

的.ui-scrollfix { 背景：绿色; 宽度：100％; 位置：固定; 顶部：0; 左：0; }

6. 享受固定标题（元素看起来很时髦，因为你已经应用了位置：固定到其中两个，但这只是为了让你起步并运行）

Answer 3

你有没有设置合适的CSS？我知道你必须为ui-scrollfix设置类。

Angular ui-utils scrollfix

3 个答案: