Button fixed to the side of a container

Question

I have a container and inside I have columns that have cards inside.

I need my button to be fixed to the right of the cards, but you should only follow the scroll of the screen in this container.

My current structure:

<div class="container-fluid>

   <div class="col-md-3"> <!-- div do botão !-->
      <a (click)="addVariacao()" class="z-depth-1 waves-effect"><i class="fa fa- 
      plus my-float"></i>
      </a>
      <label (click)="addVariacao()" for="btnAddVariacao" 
      class="tipografiaAdicionaVariacao">Adicionar variação
      </label>
   </div>

   <div class="col-sm-6 col-xl-4" [formGroup]="item"> <!-- div com o card !-->
      <div class="card animated fadeIn cardVariacao">
         CARD
      </div>
   </div>
</div>

Cards are added via the addVariation() function, the idea is that as you add new cards the "Add Variation" button follows the right side centered on the Fluid container.

I’m using Material Design Bootstrap

Answer 1

I managed to resolve by adding this class in my div that has the button:

  .divBotoesVariacao{
    float: right
    position: sticky
    left: 50%
    top: 50%
    transform: translateX(-50%)
  }