Vue

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="app">
  <div
    class="cart-sticky-bottom box"
    :class="{
      'is-open': isDropupOpen
    }"
  >
    <button class="button is-primary is-small"
      @click="toggle"
    >
      Open {{ isDropupOpen ? 'yes' : 'no' }}
    </button>
    <hr>
    <div class="container-s">
    
    </div>
    <div class="column is-3"
      v-for="item in _.range(1, 15)"
      :key="item"
     >
       <div class="item" v-text="item"></div>
     </div>
  </div>
  <h2>Items:</h2>
  <div class="columns is-multiline is-mobile is-vcentered">
    <div class="column is-3"
      v-for="item in _.range(1, 30)"
      :key="item"
     >
       <div class="item" v-text="item"></div>
     </div>
  </div>
  
    
</div>

SCSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}
.item {
  height: 100px;
  background-color: #d2d2d2;
}
.cart-sticky-bottom {
    border-radius: 4px 4px 0 0;
    position: fixed;
    left: 15%;
    right: 15%;
    transition: all .3s ease-out;
    top: calc(100vh - 54px);
    margin-bottom: 0 !important; // Shitty fix for the try
    &.is-open {
        position: fixed;
        bottom: 0px;
        top: 30%;
    }
}

Vue

new Vue({
  el: "#app",
  data: {
    isDropupOpen: false,
  },
  methods: {
  	toggle() {
    	this.isDropupOpen = !this.isDropupOpen;
    }
  }
})