header.html

<!-- _includes/header.html -->
{% if page.animated_navbar %}
<nav class="navbar is-fixed-top" id="animated-header">
{% else %}
<nav class="navbar is-fixed-top">
{% endif %}
    <div class="container">
        <div class="navbar-brand">
            <img src="{{ site.logo_image | absolute_url }}" width="35">
            {% if site.is_primary_site -%}
                {%- assign primary_site_url = '/' | absolute_url -%}
                {%- assign force_internal_link_class = '' -%}
            {%- else -%}
                {%- assign primary_site_url = "https://slicer.org/" -%}
                {%- assign force_internal_link_class = 'force-internal-link' -%}
            {%- endif -%}
            <a href="{{ primary_site_url }}" class="navbar-item {{ force_internal_link_class }}">
                {{ site.title }}
            </a>
            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div class="navbar-menu" id="navMenu">
            <div class="navbar-end">
                {%- assign title = 'Application' -%}
                {%- assign items = site.data[site.footer_menu][title].items -%}
                {% include navbar-column.html %}

                {%- assign title = 'Support' -%}
                {%- assign items = site.data[site.footer_menu][title].items -%}
                {% include navbar-column.html %}

                {%- assign title = 'Solutions' -%}
                {%- assign items = site.data.solutions -%}
                {% include navbar-column.html %}

                {%- assign title = 'Developers' -%}
                {%- assign items = site.data[site.footer_menu][title].items -%}
                {% include navbar-column.html %}

                {%- assign title = 'About' -%}
                {%- assign items = site.data[site.footer_menu][title].items -%}
                {% include navbar-column.html %}
            </div>
        </div>
    </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).scroll(function() {
       var scroll = $(window).scrollTop();
       if (scroll > 500) {
         $("#animated-header").addClass("active");
       }
       else {
         $("#animated-header").removeClass("active");
       }
});
</script>