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


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>

        <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">
        <i class="fa fa-search" style="margin-top: 30px; margin-right: 40px;" aria-hidden="true"
           title="Buscar perguntas"></i>

    <div ng-cloak class="tabsdemoDynamicHeight">
            <md-tabs md-dynamic-height md-border-bottom>
                <md-tab label="Todos">
                        <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>
                            <md-card ng-repeat="question in questions | filter:search | limitTo:limitAll" style="cursor:pointer;">
                                <md-card-content ng-click="navigateTo('/questions/answers/' +">


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>

Any way to do?


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


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:

Working example

More examples:

Scroll to Top