vuejs-scroll-fixed-header

Vue2 scroll fixed header component
18,285 4
Install
npm install vuejs-scroll-fixed-header
Latest Version:1.0.3
Vue:2
License:MIT
Last Updated:Aug 28, 2024
Links: GitHub  ·  npm
Maintainer: tridiamond

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

Related Packages

Version History

Version Released Vue License
1.0.3 ^2.5.13 MIT
1.0.2 ^2.5.13 MIT
1.0.1 ^2.5.13 MIT
1.0.0 ^2.5.13 MIT