jquery - 有条件的 CSS 媒体查询？

Question

我不确定如何准确地提出这个问题。我正在使用 jQuery 在导航栏上触发动画(一旦开始滚动，导航栏就会变小——包括里面的 Logo 图像)。一切都很好。有一个“进”和“出”动画。

我的问题是我有一个 CSS 媒体查询将 Logo 图像大小减小到 1200 像素。 “进”和“出”动画包括不考虑屏幕尺寸的实际尺寸。因此，当浏览器达到 1200 像素时， Logo 的尺寸会减小。但是，一旦用户开始滚动然后滚动回顶部，jQuery“out”就会被触发， Logo 图像会恢复到原始(全屏)大小。

有没有办法告诉 jQuery 脚本返回到原始大小？

因为这是一个大型企业网站，所以很难展示代码，但这里是 jquery 和 css 媒体查询......

$(document).ready(function()
{
var scroll = 0;
var target = $("#navtrip");
var offset = target.offset();

if (target.length) 
{
    $(document).scroll(function () 
    {
        scroll = $(this).scrollTop();

        if (scroll > offset.top) 
        {
            $(".bg-dark").css({
                "animation-name" : "bgchangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
            $(".nav-link").css({
                "animation-name" : "navchangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
            $("#logoimg").css({
                "animation-name" : "logochangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
        } 
        else 
        {
            $(".bg-dark").css("animation-name", "bgchangeout");
            $(".nav-link").css("animation-name", "navchangeout");
            $("#logoimg").css("animation-name", "logochangeout");
        }
    });
}
});

和CSS

@keyframes bgchangein
{
    0%
    {
        background-color: #13293D89;
    }   
    100%
    {
        background-color: #13293D;
    }
}

@keyframes bgchangeout
{
    0%
    {
        background-color: #13293D;
    }
    100%
    {
        background-color: #13293D89;
    }
}

@keyframes navchangein 
{
    0% 
    {
        font-size: 100%;
    }
    100% 
    {
        font-size: 75%;
    }
}

@keyframes navchangeout 
{
    0% 
    {
        font-size: 75%;
    }
    100% 
    {
        font-size: 100%;
    }
}

@keyframes logochangein 
{
    0% 
    {
        height: 56px;
        width: 400px;
    }
    100% 
    {
        height: 28px;
        width: 200px;
    }
}

@keyframes logochangeout 
{
    0% 
    {
        height: 28px;
        width: 200px;
    }
    100% 
    {
        height: 56px;
        width: 400px;
    }
}

Answer 1

您可以通过 jQuery 获取窗口宽度，然后将条件应用于导航栏动画，根据窗口宽度应用不同的值(或者仅在特定宽度之上或之下应用动画)

那就是

var window_width = jQuery(window).innerWidth();

获取窗口宽度，以及

if(window_width > 1200) {
   [...] (your animation script here)
}

作为条件