Angular UI-Utils Scrollfix

Angular ui-utils scrollfix

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.

Bootstrap data-spy="affix" not working on Angular View change

Angular UI Utils (not Angular UI Bootstrap, as mentioned in the comments) has a Scrollfix directive that can be used in place of Affix. I had the same problem as you with Affix not working after changing views. I tried adding Angular UI Scrollfix to my app and so far it looks like it will meet my needs.

Here is a helpful Stack Overflow post I found with more explanation and examples: Angular ui-utils scrollfix.

Apply AngularJS directive (ui-scrollfix) conditionally

I think should do this by wrapping both headers in a directive say headers. And then in the said directive query for the second header, if it exists then apply the ui-scrollfix directive to it.

HTML

<div ng-app='app' ng-controller="aController">
    <div headers>
        <div id="main-header"> main header </div>
        <div id="second-header" ui-scrollfix> second header </div>
    </div>
</div>

JSFIDDLE

---

Related Topics