Angular ui-utils scrollfix

Question

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.

Answer 1

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.

Answer 2

**here's a plunker if that's easier :) ** http://run.plnkr.co/plunks/FN4s5U9JEFG1VXzy7azQ/

1. Make sure Angular is bootstrapped and running;

   1. Go to the following url to get the js: https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/scrollfix.js

   2. strip the directives from the module object and write them into your own module that is already boostrapped (in html: ng-app="sampleApp"/ in js: sampleApp.directive(...)

   3. paste the following html as child elements of the element you have placed the ng-app directive on :(had to write the link funky to get it through stack) https:\//github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/demo/index.html

2. paste the following style element inline in the html you just put in place (inline style is just for example purposes):

   .ui-scrollfix{ background: green; width:100%; position: fixed; top:0; left:0; }

6.ENJOY FIXED HEADER(the elements will look funky because you've applied position:fixed to two of them, but this is just to get you up and running)