一 Vue 2 scroll fixed header component
npm i vuejs-scroll-fixed-header -S
Supported Package | Version |
---|---|
Vue | 2.5+ |
Import component
// global register at main.js import ScrollFixedHeader from 'vuejs-scroll-fixed-header'; Vue.use(ScrollFixedHeader);
Vue usage
<template> <scroll-fixed-header :fixed.sync="fixed" :threshold="56"> <nav class="navbar navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Vuejs Scroll Fixed Header</a> </div> </nav> </scroll-fixed-header> </template> <script> export default { name: 'Timer', data() { return { fixed: false, }; }, }; </script>
Name | Type | Default | Description |
---|---|---|---|
fixed | Boolean | false | The fixed status of the current header |
threshold | Number | 0 | The scroll top threshold for determining the fixed status |
MIT License
Copyright (c) 2019 TriDiamond