VueSticky

by Antério Vieira

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-sticky-top.js"></script>
<div id="app">
  
  <nav  v-sticky>
    Your content
  </nav>
    
  <ul>
    <li v-for="i of 100">
      {{ '.'.repeat(i) }}
    </li>
  </ul>
  
</div>

CSS

body {
  padding: 20px;
  background: #202731;
}

nav {
  background: #42b983;
  text-align: center;
  color: #fff;
  font-size: 2rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  border: 1px solid #d9d9d9;

  padding: 10px;
  margin-bottom: 10px;
  color: #fff;
}

JavaScript

const app = new Vue({
	el: '#app',
})