Testing to change navbar behaviour in creative-bootstrap css/js

test.js

<script>
    class NavBarCustomizer {
        constructor() {
            this.navbar = document.querySelector('#mainNav');
            this.gray = '#212529';
            this.white = '#ffffff';
        }
        custom() {
            if (! document.querySelector('.masthead')) {
                if (this.navbar.classList.contains('navbar-scrolled')) {
                    for (let fa of this.navbar.querySelectorAll('.fas')) {
                        fa.style.color = this.gray;
                    }
                }
                else {
                }
            }
            else {
                if (! this.navbar.classList.contains('navbar-scrolled')) {
                    for (let fa of this.navbar.querySelectorAll('.fas')) {
                        fa.style.color = this.gray;
                    }
                }
            }

        }
    }
    window.addEventListener('load', () => {
        let customizer = new NavBarCustomizer();
        customizer.custom();
        document.addEventListener('scroll', () => {
            customizer.custom();
        });
        // document.querySelector('#mainNav').classList.add('navbar-scrolled')
    }, true);
</script>