How to disable css transition load with given script

Question

I am new to jQuery and need to figure out how to disable the transition on load for my navigation bar. Currently, when you load a page, the navigation bar transitions in with a big white bar and then settles.

Here is what I have. It works beautifully for the navigation bar to disappear on page scroll up; the only issue is on the initial page load, I do not want any transitioning.

<script>
    jQuery(function($) {
        var topPosition = 0;

        $(window).scroll(function() {
            var scrollMovement = $(window).scrollTop();

            if (topPosition < 200) {
                // Add any additional logic for topPosition less than 200 if needed
            } else {
                if (scrollMovement > topPosition) {
                    $('#global-header-section').removeClass('show-header');
                    $('#global-header-section').addClass('hide-header');
                } else {
                    $('#global-header-section').removeClass('hide-header');
                    $('#global-header-section').addClass('show-header');
                }
            }
            topPosition = scrollMovement;
        });
    });
</script>

<style>
    #main-content {
        margin-top: 7vw;
    }

    .hide-header {
        opacity: 0;
        margin-top: -200px !important;
    }

    .show-header {
        opacity: 1;
        margin-top: 0px !important;
    }

    #global-header-section {
        -webkit-transition: all 0.5s ease !important;
        -moz-transition: all 0.5s ease !important;
        -o-transition: all 0.5s ease !important;
        -ms-transition: all 0.5s ease !important;
        transition: all 0.5s ease !important;
    }
</style>

Answer 1

Add a class to #global-header-section div and name it disable-transition to disable the transition on page load.

When page fully loaded, activate the transition. You can ajust the timing.

Here is an example below. on how you can go about it.

// Then in your JS code
<script>
jQuery(function ($) {
    // Add a class to disable transition on page load
    $('#global-header-section').addClass('disable-transition');
    // Remove the class after a short delay 
    // You can adjust the time it takes to remove the class. here is half a  second 
    setTimeout(function () {
        $('#global-header-section').removeClass('disable-transition');
    }, 500);
  /* ... Your existing styles ... */
    
});
</script>

/*In your CSS code add:*/
<style>
    /* ... Your existing styles ... */

    #global-header-section.disable-transition {
        transition: none !important;
    }
</style>