Vuejs-scroll-fixed-header Component

一 Vue 2 scroll fixed header component

Demo 📙 中文文档 📙Changelog

Installation

npm i vuejs-scroll-fixed-header -S

Usage

Support

Supported Package	Version
Vue	2.5+

Install component and Usage

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>

Props

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

Liscense

MIT License

Copyright (c) 2019 TriDiamond