JSFiddle - React, Tailwind, and code Playground

Menu animation on scroll

by brasofilo

HTML

<div id="header_nav">
    <menu>
        <span>menu 1</span><span>menu 2</span><span>menu 3</span>
    </menu>
</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}
#header_nav {
    width:100%;
    height:100px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
}
#header_nav menu {
    font-size:2em;
    padding: 0 25px
}
#header_nav span::before {
    content:" | ";
}
#header_nav span:last-child:after {
    content:' | ';
}

JavaScript

$(function () {
    $('#header_nav').data('size', 'big');
});

$(window).scroll(function () {
    if ($(document).scrollTop() > 0) {
        if ($('#header_nav').data('size') == 'big') {
            $('#header_nav').data('size', 'small');
            $('#header_nav').stop().animate({
                height: '40px'
            }, 400);
            $('#header_nav menu').animate({
                zoom: .5
            }, 200);
        }
    } else {
        if ($('#header_nav').data('size') == 'small') {
            $('#header_nav').data('size', 'big');
            $('#header_nav').stop().animate({
                height: '100px'
            }, 100);
            $('#header_nav menu').animate({
                zoom: 1
            }, 200);
        }
    }
});