Question

我不确定如何准确地提出这个问题。我正在使用jQuery触发导航栏上的动画（一旦你开始滚动，导航栏变小 - 包括里面的徽标图像）。一切都很好。有一个“in”和一个“out”动画。

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

有没有办法告诉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)
}

作为条件

CSS媒体查询条件？

1 个答案: