JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.6/vue.min.js"></script>
<div id="test">
  <div class="container" @scroll="onScroll">
    <div class="content">
      <div class="fixed" :style="fixedStyle">
      </div>
    </div>
  </div>
</div>

CSS

.container {
  max-height: 500px;
  border: 1px solid black;
  overflow: auto;
}

.content {
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  height: 2000px;
}

.fixed {
  position: absolute;
  background-color: yellow;
  border: 1px solid black;
  left: 100px;
  width: 100px;
  height: 100px;
}

JavaScript

function px(v) {
  return v.toString() + "px";
}


var vm = new Vue({
  el: "#test",
  data: function() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    onScroll(e) {
      this.scrollTop = e.target.scrollTop;
    }
  },
  computed: {
    fixedStyle() {
      return {
        top: px(this.scrollTop + 100)
      };
    }
  }
})