Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vuejs-scroll-fixed-header

TriDiamond2.2kMIT1.0.3

Vue2 scroll fixed header component

Vue2, vue-component, scroll-fixed-header, vuejs2, fixed-header

readme

Vuejs-scroll-fixed-header Component

Build Status Github starts License Npm downloads Npm version

一 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

changelog

Changelog

1.0.2 (Feb 25, 2019)

  • Remove fixed prop being return as data in the component.

1.0.1 (Feb 25, 2019)

  • Update document

1.0.0 (Feb 25, 2019)

  • Initial package