仅媒体查询不能按预期运行
[英]Media Only Query Not Functioning as Intended
问题描述
I am trying to write some jQuery that responds at the same time as my CSS media only queries. 
我正在尝试编写一些与我的CSS媒体仅查询同时响应的jQuery。
I have objects that slide onto the web page at a specific scroll point. 我有一些对象可以在特定的滚动点滑动到网页上。 But in order to keep the objects responsive, I need to change the scroll point using media queries. 但是为了保持对象的响应速度，我需要使用媒体查询来更改滚动点。
Heres the code: 这是代码：
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
The media only screen that my content responds to is this: 我的内容响应的唯一媒体屏幕是这样的：
@media only screen and (min-width: 768px) and (max-width: 995px) {}
Not only is the jQuery not creating the desired effect, but my code is incredibly inefficient and the main block of: jQuery不仅不能产生理想的效果，而且我的代码效率低下，其主要功能块：
if (jQuery('.rightSlideB').hasClass('visible') == false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible')
});
}
is being repeated. 被重复。 How can I trim that section down because it is being recycled in every media query any way. 我如何缩小该部分的大小，因为它以任何方式在每个媒体查询中都被回收。
EDIT: Should I be placing that repeating block into a function and then call it every time? 编辑：我应该将重复块放入函数，然后每次调用它吗？
What am I missing here? 我在这里想念什么？ Thank you. 谢谢。
2 个解决方案
解决方案1
1 已采纳 2015-12-23 17:12:34
Perhaps you should put the default block to the top (if it fits most situations) to give it a priority. 也许您应该将默认块放在顶部（如果适用于大多数情况）以使其具有优先级。 And add an if condition to the default block too that is the opposite of what you do in the media query. 并将if条件也添加到默认块中，这与您在媒体查询中所做的相反。 Lastly Join them with an if else conditional: 最后，如果有其他条件，请加入他们：
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');
});
}
}
}
});
解决方案2
1 2015-12-23 20:17:17
So here is my final solution. 所以这是我的最终解决方案。
First I turned that repeating block of code into a function: 首先，我将重复的代码块转换为一个函数：
$.fn.fromRight = function () {
if (jQuery('.rightSlideB').hasClass('visible') === false) {
jQuery('.rightSlideB').stop().animate({
right: '0px'
}, function () {
jQuery('.rightSlideB').addClass('visible');
});
}
};
Next, I set up new media queries (according to the most popular mobile devices) and then called the function each time the scroll height needed to be checked: 接下来，我设置新的媒体查询（根据最受欢迎的移动设备），然后在每次需要检查滚动高度时调用该函数：
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();
}
}
});
Now I just need to scrap my old CSS media queries and follow these new ones. 现在，我只需要废弃旧的CSS媒体查询并关注这些新查询。 There you have it, responsive web design is so much fun isn't it? 有了，响应式网页设计非常有趣，不是吗？ ;) ;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.