title: How to fix an element after scroll in an AngularJS webpage
body: <p>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.</p>
  
  <p>I also tried using Angular UI's ui-scrollfix but it is also not working.</p>
  
  <p>I am sharing my code. It is a partial page. Please advise me a method to achieve the above mentioned effect.</p>
  
  <pre><code>&lt;div class="row pdiv"&gt;
  
  
      &lt;div class="col-md-8 pdiv col-md-offset-2"&gt;
          &lt;h3&gt;&lt;b&gt;About Us&lt;/b&gt;&lt;/h3&gt;
          &lt;ul class="nav nav-justified"&gt;
              &lt;li role="presentation"&gt;&lt;a href="" ng-click="scrollTo('weAre')"&gt;What are    we?&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="" ng-click="scrollTo('brandsAssociation')"&gt;Brands Associations&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="" ng-click="scrollTo('knowUs')"&gt;Know Us&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="" ng-click="scrollTo('motto')"&gt;Our Motto&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id="weAre" class="col-md-8 pdiv col-md-offset-2"&gt;
      &lt;br&gt;
      &lt;h4&gt;&lt;b&gt;What are we?&lt;/b&gt;&lt;/h4&gt;
      &lt;p&gt;Some content goes here.&lt;/p&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;/div&gt;
  
      &lt;div id="brandsAssociation" class="col-md-8 pdiv col-md-offset-2"&gt;
      &lt;br&gt;
      &lt;h4&gt;&lt;b&gt;Brands Associations&lt;/b&gt;&lt;/h4&gt;
      &lt;p&gt;Some content goes here.&lt;/p&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;/div&gt;
  
      &lt;div id="knowUs" class="col-md-8 pdiv col-md-offset-2"&gt;
      &lt;br&gt;
      &lt;h4&gt;&lt;b&gt;Know Us&lt;/b&gt;&lt;/h4&gt;
      &lt;p&gt;Some content goes here.&lt;/p&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;/div&gt;
  
      &lt;div id="motto" class="col-md-8 pdiv col-md-offset-2"&gt;
      &lt;br&gt;
      &lt;h4&gt;&lt;b&gt;Our Motto&lt;/b&gt;&lt;/h4&gt;
      &lt;p&gt;Some content goes here.&lt;/p&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;a href="" ng-click="scrollTo('header')"&gt;&lt;span id="toTop" class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I need to fix the ul class .nav .nav-justified after it hits the top of the page.</p>
  
  <p>I am using bootstrap.</p>
  
  <p>here are the javascript dependencies.</p>
  
  <pre><code>&lt;script src="angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="angular/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Please help...</p>