How to fix an element after scroll in an AngularJS webpage

Question

I recently made a website in AngularJs. I am still in the learning phase. I wish to fix an element on a page after it reaches the top. I have tried all sorts of Javascript and Jquery functions. However, they don't seem to be working. I also tried using Angular UI's ui-scrollfix but it is also not working. I am sharing my code. It is a partial page. Please advise me a method to achieve the above mentioned effect. ```

About Us

What are we?

Accepted Answer

To fix your `ul` to the top when it hits the top of the page on scroll, you can put a directive on it that checks for the window's scrollTop() exceeding the `ul` element's offset top. When that occurs, the directive can just add a class to the element that fixes it to the top.

So your `ul` markup would look like this, with new directive `set-class-when-at-top` on it:

```
<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
```

That directive would add the CSS class `fix-to-top` to the element when the element hits the top of the page. The directive definition would look like this:

```
app.directive('setClassWhenAtTop', function ($window) {
  var $win = angular.element($window); // wrap window object as jQuery object

return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
          offsetTop = element.offset().top; // get element's offset top relative to document

$win.on('scroll', function (e) {
        if ($win.scrollTop() >= offsetTop) {
          element.addClass(topClass);
        } else {
          element.removeClass(topClass);
        }
      });
    }
  };
});
```

If you wanted to get a bit cheeky, you could even reduce your `scroll` handler to just one line:

```
$win.on('scroll', function (e) {
  element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass);
});
```

And the `fix-to-top` CSS class would just be something like this:

```
.fix-to-top {
  position: fixed;
  top: 0;
}
```

Here's a fiddle.

How to fix an element after scroll in an AngularJS webpage

Solution

Problem

Related problems