[英]Media Only Query Not Functioning as Intended
我正在尝试编写一些与我的CSS媒体仅查询同时响应的jQuery。
我有一些对象可以在特定的滚动点滑动到网页上。 但是为了保持对象的响应速度,我需要使用媒体查询来更改滚动点。
这是代码:
jQuery(window).scroll(function () {
//media query scroll point @ min 768, max 995
if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
if (jQuery(this).scrollTop() > 400) {
if (jQuery('.rightSlideB').hasClass('visible') == false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible')
});
}
}
} //end media query
//default scroll point
if (jQuery(this).scrollTop() > 250) {
if (jQuery('.rightSlideB').hasClass('visible') == false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible')
});
}
} //end default scroll point
}); //end function
我的内容响应的唯一媒体屏幕是这样的:
@media only screen and (min-width: 768px) and (max-width: 995px) {}
jQuery不仅不能产生理想的效果,而且我的代码效率低下,其主要功能块:
if (jQuery('.rightSlideB').hasClass('visible') == false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible')
});
}
被重复。 我如何缩小该部分的大小,因为它以任何方式在每个媒体查询中都被回收。
编辑:我应该将重复块放入函数,然后每次调用它吗?
我在这里想念什么? 谢谢。
也许您应该将默认块放在顶部(如果适用于大多数情况)以使其具有优先级。 并将if条件也添加到默认块中,这与您在媒体查询中所做的相反。 最后,如果有其他条件,请加入他们:
jQuery(window).scroll(function () {
if (document.documentElement.clientWidth > 995) {
if (jQuery(this).scrollTop() > 250) {
if (jQuery('.rightSlideB').hasClass('visible') === false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible');
});
}
}
} else if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
if (jQuery(this).scrollTop() > 400) {
if (jQuery('.rightSlideB').hasClass('visible') === false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible');
});
}
}
}
});
所以这是我的最终解决方案。
首先,我将重复的代码块转换为一个函数:
$.fn.fromRight = function () {
if (jQuery('.rightSlideB').hasClass('visible') === false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible');
});
}
};
接下来,我设置新的媒体查询(根据最受欢迎的移动设备),然后在每次需要检查滚动高度时调用该函数:
jQuery(window).scroll(function () {
if (document.documentElement.clientWidth > 1440) {
if (jQuery(this).scrollTop() > 250) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 1440 && document.documentElement.clientWidth > 1366) {
if (jQuery(this).scrollTop() > 275) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 1366 && document.documentElement.clientWidth > 1280) {
if (jQuery(this).scrollTop() > 325) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 1280 && document.documentElement.clientWidth > 800) {
if (jQuery(this).scrollTop() > 400) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 800 && document.documentElement.clientWidth > 768) {
if (jQuery(this).scrollTop() > 475) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 768 && document.documentElement.clientWidth > 600) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 600 && document.documentElement.clientWidth > 567) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 567 && document.documentElement.clientWidth > 414) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 414 && document.documentElement.clientWidth > 384) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 384 && document.documentElement.clientWidth > 375) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 375 && document.documentElement.clientWidth > 360) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 360 && document.documentElement.clientWidth > 320) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
} else if (document.documentElement.clientWidth <= 320) {
if (jQuery(this).scrollTop() > 425) {
$.fn.fromRight();
}
}
});
现在,我只需要废弃旧的CSS媒体查询并关注这些新查询。 有了,响应式网页设计非常有趣,不是吗? ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.