Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/potato4d/vue-fixed-header

Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.
https://github.com/potato4d/vue-fixed-header

javascript vue vue-components

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/potato4d/vue-fixed-header
Owner: potato4d
License: mit
Created: 2017-12-30T16:42:38.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-04-12T00:41:47.000Z (about 2 months ago)
Last Synced: 2024-04-12T00:55:02.706Z (about 2 months ago)
Topics: javascript, vue, vue-components
Language: Vue
Homepage:
Size: 8.69 MB
Stars: 167
Watchers: 3
Forks: 17
Open Issues: 16
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Lists

awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (UI Components / Miscellaneous)
awesome-vue - vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Components & Libraries / UI Components)
my-awesome-stars - potato4d/vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript. (Vue)

README

        # Vue Fixed Header

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](https://opensource.org/licences/MIT)

[![NPM version](https://img.shields.io/npm/v/vue-fixed-header.svg?style=flat-square)](https://npmjs.com/package/vue-fixed-header)

[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)

[![NPM downloads](https://img.shields.io/npm/dm/vue-fixed-header.svg?style=flat-square)](https://npmjs.com/package/vue-fixed-header)

[![codecov](https://codecov.io/gh/potato4d/vue-fixed-header/branch/master/graph/badge.svg)](https://codecov.io/gh/potato4d/vue-fixed-header)

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

[![Image from Gyazo](https://i.gyazo.com/2511ffaabd325f76c8fe9343ba07fdcc.gif)](https://gyazo.com/2511ffaabd325f76c8fe9343ba07fdcc)

[![Edit vue-fixed-header demo](https://codesandbox.io/static/img/play-codesandbox.svg?style=flat-square)](https://codesandbox.io/s/yvjoj937x1?fontsize=14)

## Install

```bash

yarn add vue-fixed-header

```

## Usage

### Use in Single File Component

```html

  

    


      Your Content

    

  

import FixedHeader from 'vue-fixed-header'

export default {

  components: {

    FixedHeader

  }

}

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

  position: fixed;

  left: 0;

  top: 0;

  width: 100vw;

}

```

### 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.

```html

  

    


      Your Content

    

  

import FixedHeader from 'vue-fixed-header'

export default {

  components: {

    FixedHeader

  }

}

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

  position: fixed;

  left: 0;

  top: 0;

  width: 100vw;

}

```

### headerClass

CSS class for fixed-header root Element.

It is always attached to fixed header root Element.

- type: String,

- required: false

- default: 'vue-fixed-header'

### 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.

- type: String

- required: false

- default: 'vue-fixed-header--isFixed'

## License

MIT © [potato4d](https://github.com/potato4d)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    
_{HANATANI Takuma}
💻 🐛 📖 💡 💬 👀

    
_EGOIST
🔧

    
_{Johnny Cavalcante}
🐛

    
_{James Wright}
🐛

    
_Sid
⚠️

    
_{André Van Dal}
💻

    
_Patrik
🐛

  

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!