我不确定如何准确地提出这个问题。 我正在使用 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;
}
}
最佳答案
您可以通过 jQuery 获取窗口宽度,然后将条件应用于导航栏动画,根据窗口宽度应用不同的值(或者仅在特定宽度之上或之下应用动画)
那就是
var window_width = jQuery(window).innerWidth();
获取窗口宽度,以及
if(window_width > 1200) {
[...] (your animation script here)
}
作为条件
关于jquery - 有条件的 CSS 媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50144439/