Game-Jaming/Frontend/Javascript/HeaderFunctionality.js

$(document).ready(function() {
    const scrollableObj = document.getElementById('content');

    var scrollBar = new MiniBar('#content', {
        barType: "default",
        scrollX: false,
        scrollY: true,
        scrollAmount: 20,
        onScroll: function() {
            // Resize header on scroll.
            if($('.smart-scroll').length > 0) {
                scrollableObj.addEventListener('wheel', ScrollDirection);

                const NavCollapse = document.getElementById('navbarSupportedContent');

                const BackToTop = $('#return-to-top');
                const nav = $('.smart-scroll');
                const body = $('body');

                const container = document.querySelector('.mb-content');

                if (container.scrollTop <= 0)
                {
                    body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
                    nav.removeClass('scrolled-down').addClass('scrolled-up');
                    BackToTop.fadeOut(300);
                    scrollBar.update();
                }


                function ScrollDirection(event) {
                    var delta;

                    if (event.wheelDelta) 
                    {
                        delta = event.wheelDelta;
                    } 
                    else 
                    {
                        delta = -1 * event.deltaY;
                    }

                    if (delta < 0) 
                    {
                        body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
                        nav.removeClass('scrolled-up').addClass('scrolled-down');
                        BackToTop.fadeIn(300);
                        NavCollapse.classList.remove('show');
                        scrollBar.update();
                    } 
                    else if (delta > 0) 
                    {
                        body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
                        nav.removeClass('scrolled-down').addClass('scrolled-up');
                        BackToTop.fadeOut(300);
                        scrollBar.update();
                    }
                }
            }
        }
    });

    $('body').onSwipe(function(results) {
        const NavCollapse = document.getElementById('navbarSupportedContent');

        const BackToTop = $('#return-to-top');
        const nav = $('.smart-scroll');
        const body = $('body');

        if (results.up)
        {
            body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
            nav.removeClass('scrolled-up').addClass('scrolled-down');
            BackToTop.fadeIn(300);
            NavCollapse.classList.remove('show');
        }

        if (results.down)
        {
            body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
            nav.removeClass('scrolled-down').addClass('scrolled-up');
            BackToTop.fadeOut(300);
        }
    })

    GoToTop = function() {
        scrollBar.scrollToTop();

        // Show the Navbar on click.
        $('#header').removeClass('scrolled-down').addClass('scrolled-up');
        $('body').removeClass('bodyScrolled-down').addClass('bodyScrolled-up');

        $('#return-to-top').fadeOut(300);
    }

    // Floating button functionality
    $('#return-to-top').click(function() {
        GoToTop();
    });
    
    // Smooth scrolling when click to nav
    $('.NavLink').click(function(e) {
        // Target element id.
        var id = $(this).attr('href');

        // Target element.
        var $id = $(id);

        // If no id was provided, return nothing.
        if ($id.length === 0) 
        {
            return;
        }

        // Prevent standard hash navigation (avoid blinking in IE).
        e.preventDefault();

        // Top position relative to the document.
        var pos = $id.position().top;

        if (pos >= 0)
        {
            $('#return-to-top').fadeIn(300);
        }

        // Animated top scrolling.
        if (pos === 0)
        {
            scrollBar.scrollTo(pos, 'y');
        }
        else if (pos > 0)
        {
            scrollBar.scrollBy(pos, 'y');
        }
        else if (pos < 0)
        {
            scrollBar.scrollBy(pos, 'y');
        }

        // Hide the Navbar on click.
        $('#header').addClass('scrolled-down');
        $('body').addClass('bodyScrolled-down');
        return;
    });
});