PlataformaEducativa/header.html

<header id="menu" class="header">
    <a href="index" class="logo"><img id="#logo-menu" class="ajustar-img" src="img/logos/logo.png" alt="Logo"></a>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    <ul class="menu">
        <li><a id="link1" class="white-blue" href="index">Inicio</a></li>
        <li><a id="link2" class="white-blue" href="conocenos">Conócenos</a></li>
        <li><a id="link3" class="white-blue" href="funciones">Funciones</a></li>
        <li><a id="link4" class="white-blue" href="contacto">Contacto</a></li>
        <li><a id="covid" class="covid slideDown white-button" href="apoyo-covid-19">Apoyo COVID-19</a></li>
    </ul>
</header>

<script>
    var body = document.body;
    var cont = 1;
    setInterval('contador1()', 750);

    function contador1() {
        if (cont > 2) {
            $('#covid').addClass('pulse');
        }
        cont++;
    }

    $(window).scroll(function() {
        $('#menu').each(function() {
            var barra = $(window).scrollTop();
            if (barra > 15) {
                $(this).css({
                    'opacity': '0'
                })
            } else {
                $(this).css({
                    'opacity': '1'
                })
            }
        });
    });
    $(window).scroll(function() {
        $('#menu').each(function() {
            var barra = $(window).scrollTop();
            if (barra > 770) {
                $(this).css({
                    'opacity': '0'
                });
                $('#covid').addClass('strong-blue-button');
            } else {
                $(this).css({
                    'opacity': '1'
                });
                $('#covid').addClass('strong-blue-button');
            }
        });
    });
    $(window).scroll(function() {
        $('#menu').each(function() {
            var barra = $(window).scrollTop();
            if (barra > 15) {
                $(this).css({
                    'opacity': '0'
                })
            } else {
                $(this).css({
                    'opacity': '1'
                })
            }
        });
    });
    $('#menu').hover(function() {
        $(this).css({
            'opacity': '1'
        })
    });
    $('#menu').mouseleave(function() {
        var barra = $(window).scrollTop();
        if (barra > 15) {
            $(this).css({
                'opacity': '0'
            })
        } else {
            $(this).css({
                'opacity': '1'
            })
        }
    });
</script>