Vue
HTML
<div id="app">
<div class="sticky">
Scrolled to bottom: {{ scrolledToBottom }}
</div>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
height: 200vh;
}
.sticky {
position: sticky;
top: 0;
}
Vue
new Vue({
el: "#app",
data: {
scrolledToBottom: false
},
methods: {
scroll () {
window.onscroll = () => {
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
if (bottomOfWindow) {
this.scrolledToBottom = true // replace it with your code
}
}
}
},
mounted () {
this.scroll()
}
})