A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://npmjs.com/package/vue-fixed-header below:

vue-fixed-header - npm

Vue Fixed Header

Simple and cross-browser friendly fixed header component for Vue.js.

Install

yarn add vue-fixed-header

Usage Use in Single File Component

<template>

  <fixed-header>

    <div class="navbar">

      Your Content

    </div>

  </fixed-header>

</template>

 

<script>

import FixedHeader from 'vue-fixed-header'

 

export default {

  components: {

    FixedHeader

  }

}

</script> 

 

<style>

.navbar.vue-fixed-header--isFixed {

  position: fixed;

  left: 0;

  top: 0;

  width: 100vw;

}

</style> 

Attach classes

The Vue Fixed Header always assigns the vue-fixed-header CSS class to the slot's root element. Also, when matching the fixed condition, we give the vue-fixed-header - isFixed CSS class. These can also be changed with headerClass prop and fixedClass prop.

Props threshold: number

The threshold value for determining the scroll state.

<template>

  <fixed-header :threshold="100">

    <div class="navbar">

      Your Content

    </div>

  </fixed-header>

</template>

 

<script>

import FixedHeader from 'vue-fixed-header'

 

export default {

  components: {

    FixedHeader

  }

}

</script> 

 

<style>

.navbar.vue-fixed-header--isFixed {

  position: fixed;

  left: 0;

  top: 0;

  width: 100vw;

}

</style> 

headerClass

CSS class for fixed-header root Element. It is always attached to fixed header root Element.

fixedClass

CSS class for fixed header. When fixed-header position is relative, it removed to DOM Element. When fixed-header position is fixed, it added to DOM Element.

License

MIT © potato4d

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4