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.