Resposive divs?

[P-siu16]

Hi everybody, i want to add to my pages a fab in the bottom that when you click it it shows a div like this:

I have that but when i go down the div stays up like this:

THIS IS PAGE.HTML:

  <div class="all" id="guideDiv" style="display: none;">
    <div class="options" padding ion-fixed>
      <div class="cont_elements">
        <h1>¿Necesitas ayuda?</h1>
        <p>Sigue estos videtutoriales, para comenzar, mira este <a (click)="introGuide()" style="color: #007acc;">video introductorio</a>.</p>

        <h4>¿Tienes consultas?</h4>
        <p>Si tienes una consulta, puedes hablar con nostros mediante de un chat en tiempo real.</p>
        <p (click)="chatGuide()"><ion-icon class="icono" name="play"></ion-icon>  ¿Cómo iniciar una conversación?</p>

        <h4>¿No estamos disponibles?</h4>
        <p>Si tienes una duda y estamos fuera de horario puedes enviarnos un Ticket con tu consulta.</p>
        <p (click)="updatesGuide()"><ion-icon class="icono" name="play"></ion-icon>  ¿Como crear tickets?</p>
      </div>
      <div class="after">
      </div>
    </div>
  </div>
  <ion-fab  bottom right>
    <button ion-fab mini class="fab-button" (click)="showDiv()">
      <ion-icon [name]="zipped ? 'play' : 'md-square'"></ion-icon>
    </button>
  </ion-fab>

THIS IS PAGE.TS

  chatGuide(){
      let modal = this.modalCtrl.create('ChatguideGerentePage');
      modal.present();
    }

    introGuide(){
      let modal = this.modalCtrl.create('IntroguideGerentePage');
      modal.present();
    }

    updatesGuide(){
      let modal = this.modalCtrl.create('IntroguideGerentePage');
      modal.present();
    }

    showDiv(){
      var guideDiv = document.getElementById("guideDiv");

       if (guideDiv.style.display === "none") {
           guideDiv.style.display = "block";
       } else {
           guideDiv.style.display = "none";
       }

       this.zipped = !this.zipped;
    }

THIS IS PAGE.SCSS:

.options {
    height: 50%;
    width: 65%;
    background: white;
    box-shadow: 1px 2px 8px 4px rgba(#888888, 0.67);
    border-radius: 20px;
    text-align: justify;
    // position: fixed;
    bottom: 14%;
    right: 2%;
    // box-sizing: border-box;
  }
  .after {
    content: "";
    position: fixed;
    width: 0px;
    height: 0px;
    margin-left: -0.5em;
    bottom: -3.8%;
    right: 10%;
    box-sizing: border-box;
    border: 0.5em solid black;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }
  .cont_elements{
    overflow-y:scroll;
    height:100%;
  }
  .input-cover {
    position: static;
  }
  h1 {
    font-size: 20px;
  }
  p {
    font-size: 13px;
  }
  a {
    text-decoration: underline;
  }
  h4 {
    font-size: 15px;
  }
  .icono {
    background-color:#3387c6;
    padding-top: 5px;
    padding-left: 8px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
  }
  .fab-button {
    background:#3387c6;
  }

Any idea of how to keep them together even when the page has been scrolled?