如何使用给定脚本禁用CSS过渡加载

Question

我是 jQuery 新手，需要弄清楚如何禁用导航栏加载时的转换。现在，当您加载页面时，导航会转换为一个大白条，然后稳定下来。

这是我所拥有的。它可以让导航在页面向上滚动时消失；唯一的问题是在初始页面加载时我不想进行任何转换。

<script>
jQuery(function($){
   
var topPosition = 0;
 
 
$(window).scroll(function() {
 
    var scrollMovement = $(window).scrollTop();
   
    if (topPosition < 200 ){
    }
    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

向#global-header-section div添加一个类并将其命名为disable-transition以禁用页面加载时的转换。

页面完全加载后，激活转换。您可以调整时间。

下面是一个例子。告诉你如何去做。

// 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>