Angular ui-utils 滚动修复 [英] Angular ui-utils scrollfix

问题描述

我想使用 ui-Utils 模块:scrollfix 来获得 <div> 从 100px 开始，如果我向下滚动，它应该固定在 0px.

test

在 scrollfix 演示站点上有一个提示框，上面写着:

<块引用>

请记住，该指令仅向元素添加了 ui-scrollfix 类.添加相应的 CSS 规则取决于您，但如果您愿意，它也使您能够添加其他规则.

即使在那里的演示页面上它也没有真正起作用....或者我期待有什么问题.

解决方案

正如您提到的 scrollfix 演示站点上的提示所述:

<块引用>

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

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

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

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

它可以在此正常状态中应用任何样式:

.yourclass {/* 你的 CSS 代码，离页面顶部 100px */}

当 ui-scrollfix 条件触发时(在本例中，我们将其设置为 +100，因此当页面滚动到元素后 100 像素时)，您的

元素将添加另一个类:

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

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

.yourclass.ui-scrollfix {位置:固定；顶部:0;}

这是一个演示，它使用绝对定位的顶部导航栏上的指令100px 距离页面顶部，当您向下滚动时，它会固定在页面顶部.同样，第二个(名为第二个导航栏")位于顶部的下方.我用于顶栏的 CSS 代码是:

.navbar-fixed-top {位置:绝对；顶部:100像素；}.navbar-fixed-top.ui-scrollfix {位置:固定；顶部:0;}

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

希望这会有所帮助.

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>

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

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.

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

解决方案

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

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.

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 */
}

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>

You can use this to set the proper CSS styling:

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

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;
}

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".

Hope this helps.

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