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...