How to leave a fixed div with the scroll?

Navigation
3

I'm using AngularJs and Angular Material and I need to make a div stay fixed 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% w_that I want to set with 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 it?

    
asked by anonymous 10.11.2016 / 12:12

2 answers

1

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

Example: 

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

This CSS will leave it fixed, centered, and right-aligned.

Or you can use Affix, follow link for viewing:

link

Example working link

More examples: link

    
10.11.2016 / 12:20
-1

Leave her style with: 

position: fixed;

If it does not resolve, please provide more information on how your CSS is, as well as the rest of the HTML, or if possible put it in JSFiddle or CodePen .

    
10.11.2016 / 12:16
Java's try-catch-resources flush automatically? How to use a two-dimensional array to get the values of the radioButtons? [closed]