https://github.com/filipchalupa/hiding-header-webcomponent

https://github.com/filipchalupa/hiding-header-webcomponent

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/filipchalupa/hiding-header-webcomponent
• Owner: FilipChalupa
• License: isc
• Created: 2021-01-10T22:13:45.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-17T14:47:23.000Z (about 2 years ago)
• Last Synced: 2024-12-26T13:13:47.133Z (4 months ago)
• Language: HTML
• Size: 49.8 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hiding Header Webcomponent [![npm](https://img.shields.io/npm/v/hiding-header-webcomponent.svg)](https://www.npmjs.com/package/hiding-header-webcomponent) ![npm type definitions](https://img.shields.io/npm/types/hiding-header-webcomponent.svg) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/hiding-header-webcomponent)

Toggles header visibility on scroll. Try [demo.html](https://filipchalupa.cz/hiding-header-webcomponent/demo.html) or [Codepen demo](https://codepen.io/Onset/project/editor/ZLOYKk).

![UI example](https://raw.githubusercontent.com/FilipChalupa/hiding-header/HEAD/screencast.gif)

# How to use

```html

	.content {

		background-color: #252525;

		color: #ffffff;

		padding: 1em;

	}

Your header content

```