A lightweight javascript plugin for hiding and showing your navigation when scrolling down your page.
-
Include the shyo.css and shyo.js on your document's
<head>and<body><head> <link rel="stylesheet" href="shyo.css"> </head> <body> <script src="shyo.js"></script> </body>
-
Add the class
shyoand the idshyoto the element you want to hide:
<header id="shyo" class="main-header shyo" data-scroll="0">
You may also want to modify the data-scroll to define when de script starts working.
-
Activate the script.
<script> $('#shyo').shyo(); </script>
You can change the style and duration of your animations in the .shyo and .shyo-up class.
.shyo {
/* Default Animation */
transform: translateY(0%);
opacity: 1;
}
.shyo-up {
/* Default Hide Animation*/
transform: translateY(-100%);
opacity: 0;
}Shyo uses the position: fixed css property so you maybe need to add:
.your-header {
width: 100%;
}shyo.js is licensed under the MIT license. (http://opensource.org/licenses/MIT)
Pull requests are allowed, I apologize in advance for the issues.