Angular ui-utils scrollfix [英] Angular ui-utils scrollfix

问题描述

我想使用 ui-Utils模块：scrollfix 具有< div> 在开始时为100像素，如果我向下滚动，它应该固定为0px。

i wanted to use the ui-Utils module: scrollfix to have a <div> at start at 100px, and if i scroll down, it should be fixed at 0px.

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

在scrollfix演示网站上有一个提示框，说：

On the scrollfix demo site is a hintbox, which says:

请记住，此指令只向元素添加一个ui-scrollfix类。它是由你添加相应的CSS规则，但它也让你能够添加其他规则，如果你喜欢。

Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

即使在那里demo-page也不是真的工作....
或者我期待什么问题。

Even on there demo-page it is not really working.... Or I'm expecting something wrong.

推荐答案

正如你提到的scrollfix演示网站上的提示：

As you mentioned the hint on the scrollfix demo site says:

请记住，此指令只向元素添加一个ui-scrollfix类。

Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

So this directive works in a way that a single CSS class ui-scrollfix is added to the element whenever the scroll condition is achieved, and the class is removed in other case (when you scroll back to the top). Therefore it's your responsibility to add proper CSS style.

您可以通过向元素添加另一个类或CSS id，并为两种情况定义适当的CSS样式，即正常的CSS样式和固定的样式向下滚动。例如，您可以在代码中添加如下代码：

You can accomplish that by adding another class or CSS id to the element and define the proper CSS styling for the two cases - the normal one, and the fixed one as you scroll down. For example, you can have something like this in you code:

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

可以在此正常状态下应用任何样式：

It can have any styling applied in this normal state:

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

当 ui-scrollfix case，我们设置为 +100 ，因此当页面滚动在你的元素后面100px后），你的< div> 元素将添加另一个类：

When the ui-scrollfix condition fires (in this case we have it set to +100, so when the page scrolling has gone 100px after your element), your <div> element will have another class added:

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

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

You can use this to set the proper CSS styling:

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

这是一个演示，它使用顶部导航栏上的指令，该指令绝对位于页面顶部的 100px 向下滚动它保持固定在页面的顶部。类似地，第二个（标题为第二个Navbar）位于顶部之下。我用于顶部栏的CSS代码是：

Here is a demo that uses the directive on the top navigation bar which is absolutely positioned 100px from the top of the page, and as you scroll down it stays fixed on the top of the page. Similarly, the second one (titled "Second Navbar") positions beneath the top one. The CSS code I'm using for the top bar is:

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

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

此外，我认为重要的是要提到 ui -scrollfix =+ 100表示当视口顶部滚动<$ c时， ui-scrollfix $ c> 100px 。如果你想让元素获得 ui-scrollfix CSS类，当它到达视口的顶部，你可以添加 ui-scrollfix = +0。

Also, I think it's important to mention that ui-scrollfix="+100" means that the ui-scrollfix class will be added to the element when the top of the viewport scrolls 100px after the element. If you'd like the element to get the ui-scrollfix CSS class as it reaches the top of the viewport you can add ui-scrollfix="+0".

希望这有助。

这篇关于Angular ui-utils scrollfix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！