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