Sliding Header

Vue.js component representing sliding header (or two different headers) for top navigation bar

How to use

This Vue component consists of one SlidingHeader.vue file that can be copy-pasted into your Vue.js project or can be plugged in as an NPM package:

npm install @vuesence/sliding-header --save

Then you can use it in the your Vue code:

<template>
	<div id="app">
		<sliding-header :threshold-hide="200" :threshold-open="400">
			<template v-slot:first-header>
				<p>The first header</p>
			</template>

			<template v-slot:second-header>
				<p>The second header</p>
			</template>
		</sliding-header>
	</div>
</template>

<script>
	import SlidingHeader from "@vuesence/sliding-header";

	export default {
		name: "App",
        components: {
            SlidingHeader
        }        
	};
</script>

<style>
.sliding-header {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
.sliding-header.first-header {
	background-color: lightgreen;
	height: 60px;
}
.sliding-header.second-header {
	background-color: lightblue;
	height: 100px;
}
.sliding-header.hidden {
	top: -100px;
}
</style>

Each template contains code for corresponding header / top navigation bar

Two props - threshold-hide and threshold-open - define vertical scrolling thresholds for hiding the first and opening the second header.

It is possible to use just one header - either the first or the second. Just omit one of the templates

sliding-header CSS class selector is shared by both headers, .first-header and .second-header are dedicated.

.sliding-header.hidden's top property should be maximum of headers' height with "-" sign.

You can play with height, transition, opacity and other CSS properties to adjust the animation to your needs.

Demo

https://altrusl.github.io/vuesence-sliding-header/

Playground

Try it on codesandbox.io

Check out my other Vue.js components

• Vuesence book - minimalistic Vue.js based documentation component

• Cloud Sync Button - a button with cloud synchronization animation
• Modal Window - simple lightweight Modal Window Vue.js component

You like Sliding Header? Star it and retweet it!

---

Troubleshooting

Any bugs, issues, feature and pull requests are welcome

Please use GitHub's issue reporter or send me an email

Contribution

Contribution is always welcome and recommended. Here is how:

• Fork the repository
• Clone to your machine
• Make your changes
• Create a pull request

License

@vuesence/sliding-header package is freely distributable under the terms of the MIT license.