Angular ui-utils scrollfix

Question

我想使用ui-Utils模块:scrollfix以<div>100px开头,如果我向下滚动,它应该固定在0px.

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

在scrolllfix演示站点上有一个提示框,其中说:

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

即使在那里有演示页面它也没有真正起作用......或者我期待有些不对劲.

Answer 1

正如您所提到的,scrolllfix演示网站上的提示说:

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

因此,该指令的工作方式ui-scrollfix是,只要实现滚动条件,就会将单个CSS类添加到元素中,而在其他情况下(当您向后滚动到顶部时)将删除该类.因此,您有责任添加适当的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;
}

这是一个使用顶部导航栏上的指令的演示,该指令绝对位于100px页面顶部,当您向下滚动时,它保持固定在页面顶部.类似地,第二个(标题为"Second Navbar")位于顶部下方.我用于顶部栏的CSS代码是:

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

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

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

希望这可以帮助.