How to leave a fixed div accompanying the scroll?

Question

I’m using AngularJs and Angular Material and I need to make a div stay fixed but I have no idea how to do, 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

To div that I want to leave fixed accompanying the scroll is this:

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

Some way to do?

Answer 1

Can you use position: Fixed? You can use Bootstrap affix and set from where it will be fixed.

Example:

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

This CSS will leave fixed, centered and aligned to the right.

Or you can use Affix, follow link to view:

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