如何通过给定脚本禁用导航栏的CSS初始加载过渡效果

作为jQuery新手，我遇到了导航栏初始加载时伴随白色长条过渡后才稳定显示的问题。现有脚本可实现页面滚动时导航栏的隐藏与显示，但希望初始加载时完全禁用过渡效果，以下是原有代码：

原有JS代码 #

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;
    });
});

原有CSS代码 #

#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;
}

解决方案 #

核心思路是延迟启用过渡效果：初始加载时不给导航栏绑定过渡样式，等页面渲染完成后再添加过渡类，这样初始状态的变化就不会触发过渡动画。

1. 修改CSS样式

把过渡效果从导航栏的默认样式中剥离，放到单独的类里：

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

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

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

/* 单独的过渡类，初始不添加 */
.header-transition {
    -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;
}

2. 调整jQuery脚本

在DOM就绪后，延迟一小段时间给导航栏添加过渡类，确保初始渲染完成：

jQuery(function($) {
    var topPosition = 0;

    // 延迟100ms添加过渡类，避免初始加载时的过渡
    setTimeout(function() {
        $('#global-header-section').addClass('header-transition');
    }, 100);

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

        if (topPosition >= 200) {
            if (scrollMovement > topPosition) {
                $('#global-header-section').removeClass('show-header').addClass('hide-header');
            } else {
                $('#global-header-section').removeClass('hide-header').addClass('show-header');
            }
        }
        topPosition = scrollMovement;
    });
});

3. 确保导航栏初始状态

在HTML中给导航栏默认添加show-header类，保证初始显示正确：

<div id="global-header-section" class="show-header">
    <!-- 你的导航栏内容 -->
</div>

内容的提问来源于stack exchange，提问作者user22909797