我希望在大于768px的屏幕尺寸上使用一组功能,而在小于此尺寸的所有尺寸上使用另一套功能。我需要.resize()
,以便我知道用户何时在横向和纵向视图之间转换平板电脑或手机。
如果我刷新页面,.resize()
事件内部的代码可以正常工作,但就好像事件没有被触发一样。有什么想法吗?
<script>
jQuery(document).ready(function($){
function mobileFilterMenu(){
var screenTest = $(window).width();
if (screenTest >= 769){
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('.inventory-search > .col-md-9').offset().top,
distance = (elementOffset - scrollTop);
if(distance <= 0){
$('.filter-form').css('top', Math.abs(distance));
}else{
$('.filter-form').css('top', 0);
}
});
}else{
var vHeight = $(window).height() - $('#switch').height() - $('#primary-menu-toggle').height();
$('.filter-form').css('height', vHeight + 'px');
vTextHeight = vHeight - 20;
$('.wpv-filter-form').css('height', vTextHeight + 'px');
objNegHeight = (vHeight * -1) + 50;
$('.filter-form').css('top', objNegHeight + 'px');
var i;
$('#switch').click(function(){
if (i === 0){
$('.filter-form').css('top', objNegHeight + 'px');
i++;
}else{
$('.filter-form').css('top', '50px');
i = 0;
}
});
}
}
mobileFilterMenu();
$(window).resize(mobileFilterMenu());
});
</script>
答案 0 :(得分:2)
只需更改代码的这一部分即可。这应该可以解决你的问题。
$(window).resize(mobileFilterMenu);
不要传递 mobileFilterMenu() ,而是传递 mobileFilterMenu
$ window.resize 中的参数应该具有 功能 而不是 函数调用 。
希望这能解决您的问题。
答案 1 :(得分:0)
您应该使用media queries
根据视口尺寸而不是代码来应用CSS
!
媒体查询使我们能够创建响应式体验,其中 特定样式适用于小屏幕,大屏幕和 介于两者之间。媒体查询语法允许创建 可以根据设备特征应用的规则。
@media (query) {
/* CSS Rules used when query matches */
}
虽然我们可以查询几个不同的项目,但使用的项目 最常用于响应式网页设计的是最小宽度,最大宽度, 最小高度和最大高度。
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>