<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[position]="200">I am pinned onto the page at 200px to the left.</p>
</div>

#dynamicexample {
  height: 700px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed';
    var s = (binding.arg == 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
});

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      position: 'left'
    }
  }
})