angularjs – How to keep a fixed div following the scroll?

Question:

I'm using AngularJs and Angular Material and I need to make a div stick but I have no idea how to do it, my structure is as follows:

<div class="page">
    <md-toolbar layout="row">
        <md-button hide-gt-sm class="menu" ng-click="toggleSidenav('left')" aria-label="Show User List">
            <md-icon md-svg-icon="menu"></md-icon>
        </md-button>

        <h2 class="md-toolbar-tools">{{pageTitle}}</h2>

        <md-input-container md-theme="input">
            <input style="border-color: #fff; font-size: 14px; color: #fff; width: 200px;" ng-model="search"
                   aria-label="Buscar pergunta">
        </md-input-container>
        <i class="fa fa-search" style="margin-top: 30px; margin-right: 40px;" aria-hidden="true"
           title="Buscar perguntas"></i>
    </md-toolbar>

    <div ng-cloak class="tabsdemoDynamicHeight">
        <md-content>
            <md-tabs md-dynamic-height md-border-bottom>
                <md-tab label="Todos">
                    <md-content>
                        <div class="content">
                            <div ng-show="diference > 0" class="text-center"> //essa é a div que quero deixar fixa
                                <a href="" ng-click="getAll()">{{diference}} novas perguntas</a>
                            </div>
                            <md-card ng-repeat="question in questions | filter:search | limitTo:limitAll" style="cursor:pointer;">
                                <md-card-content ng-click="navigateTo('/questions/answers/' + question.id)">

 //Continuação

The div I want to keep fixed following the scroll is this:

<div ng-show="diference > 0" class="text-center">
                                    <a href="" ng-click="getAll()">{{diference}} novas perguntas</a>
</div>

Any way to do?

Answer:

You can use position:fixed? You can use Bootstrap affix and define from where it will be fixed.

Example:

z-index: 11;
position: fixed;
top: calc(50vh - 86px);
right: 1%;

This CSS will be fixed, centered and right-aligned.

Or you can use Affix, follow link for viewing:

https://www.npmjs.com/package/angular-bootstrap-affix

Working example http://jsfiddle.net/nick_v6/cub6yhwe/

More examples: http://www.w3schools.com/Bootstrap/bootstrap_affix.asp