CSS Media запрос с условием? - PullRequest
Новая
       10

CSS Media запрос с условием?

0 голосов
/ 03 мая 2018

Я не уверен, как именно задать этот вопрос. Я использую jQuery для запуска анимации на панели навигации (как только вы начнете прокручиваться, панель навигации станет меньше - включая изображение логотипа внутри). Все отлично работает. Существует анимация «внутри» и «вне».

Моя проблема в том, что у меня есть медиа-запрос CSS, который уменьшает размер изображения логотипа на 1200 пикселей. Анимации «in» и «out» включают реальные размеры, которые не учитывают размер экрана. Таким образом, когда размер браузера достигает 1200 пикселей, размер логотипа уменьшается. НО, как только пользователь начинает прокручивать, а затем прокручивает обратно вверх, запускается 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");
        }
    });
}
});

и КСС 

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

1 Ответ

0 голосов
/ 03 мая 2018

Вы можете получить ширину окна с помощью jQuery, а затем применить к анимациям панели навигации условия, которые применяют различные значения в зависимости от ширины окна (или просто применять анимацию только выше или ниже определенной ширины)

Так что это будет 

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

, чтобы получить ширину окна, и 

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

как условие

...