jquery 如何禁用CSS过渡加载与给定的脚本

im9ewurl 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(135)

我是jQuery的新手，需要弄清楚如何禁用我的导航栏在加载时的转换。目前，当你加载一个页面时，导航栏会过渡到一个大的白色栏，然后稳定下来。
这是我所拥有的。它的工作漂亮的导航栏消失在页面滚动起来;唯一的问题是在初始页面加载，我不希望任何过渡。

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

个字符

jquery

来源：https://stackoverflow.com/questions/77476168/how-to-disable-css-transition-load-with-given-script

1条答案

按热度按时间

w3nuxt5m1#

在#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>

个字符

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 如何禁用CSS过渡加载与给定的脚本

1条答案

相关问题

热门标签

最新问答