css - Angular ui-utils滚动修复

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

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

在scrollfix演示站点上是一个提示框，其中显示:



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

最佳答案

正如您提到的那样，scrollfix演示站点上的提示说:



因此，此指令的工作方式是，只要达到滚动条件，就将单个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位置，并且当您向下滚动时，它保持固定在页面顶部。同样，第二个(标题为“第二导航栏”)位于顶部的下方。我用于顶部栏的CSS代码是:

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

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

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

希望这可以帮助。