JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="myapp" ng-controller="ctrl">
    
<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" set-class-when-at-top="fix-to-top">
            <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>
   ...

CSS

.nav {
    border: 1px solid blue;
}

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

JavaScript

angular.module('myapp', []).

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 top relative to the document

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

controller('ctrl', function ($scope) {
    $scope.scrollTo = function (target){
    };
});