Question

169

How to fix an element after scroll in an AngularJS webpage

rated 0 times [ 174] [ 5] / answers: 1 / hits: 43595 / 10 Years ago, sun, november 30, 2014, 12:00:00

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.

<div class=row pdiv>





    <div class=col-md-8 pdiv col-md-offset-2>

        <h3><b>About Us</b></h3>

        <ul class=nav nav-justified>

            <li role=presentation><a href= ng-click=scrollTo('weAre')>What are    we?</a></li>

            <li role=presentation><a href= ng-click=scrollTo('brandsAssociation')>Brands Associations</a></li>

            <li role=presentation><a href= ng-click=scrollTo('knowUs')>Know Us</a></li>

            <li role=presentation><a href= ng-click=scrollTo('motto')>Our Motto</a></li>

        </ul>

    </div>



    <div id=weAre class=col-md-8 pdiv col-md-offset-2>

    <br>

    <h4><b>What are we?</b></h4>

    <p>Some content goes here.</p>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    </div>



    <div id=brandsAssociation class=col-md-8 pdiv col-md-offset-2>

    <br>

    <h4><b>Brands Associations</b></h4>

    <p>Some content goes here.</p>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    </div>



    <div id=knowUs class=col-md-8 pdiv col-md-offset-2>

    <br>

    <h4><b>Know Us</b></h4>

    <p>Some content goes here.</p>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    </div>



    <div id=motto class=col-md-8 pdiv col-md-offset-2>

    <br>

    <h4><b>Our Motto</b></h4>

    <p>Some content goes here.</p>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    </div>



</div>





<a href= ng-click=scrollTo('header')><span id=toTop class=glyphicon glyphicon-chevron-up></span></a>

I need to fix the ul class .nav .nav-justified after it hits the top of the page.

I am using bootstrap.

here are the javascript dependencies.

<script src=angular/angular.min.js></script>

<script src=angular/angular-route.js></script>

<script src=js/jquery.js></script>

<script src=js/bootstrap.min.js></script>

Please help...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zariahdiamondz

Add To Favorites

Follow

Total Points: 649

Total Questions: 109

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

zariahdiamondz questions

1 Get esbuild to watch for changes, rebuild, and restart express server

Wed, Jul 13, 22, 00:00, 2 Years ago

1 ethers js exits with this error=> invalid BigNumber value (argument=value, value=undefined, code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Thu, Nov 4, 21, 00:00, 3 Years ago

1 react-data-table-component: access the selected row and assign it to setState

Tue, Jun 15, 21, 00:00, 3 Years ago

1 An argument for 'id' was not provided. angular 11

Tue, Apr 20, 21, 00:00, 3 Years ago

1 How to open offcanvas from offcanvas

Thu, Apr 8, 21, 00:00, 3 Years ago

View All

answered 10 Years ago jadyngraysons · 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.