Jquery在调整大小时忽略if语句
Jquery ignores if-statement when resizing
我写了一个函数,如果你在设备(< 992
)上向下滚动,它会固定我的顶栏($header
),效果很好。当我调整大小时,我再次使用函数fixedTopCheck()
,它删除了.fixed
类(在else语句中)。这也很好。但当我滚动时,它突然又给了类.fixed
顶部。因此,这部分被忽略了if ($(window).width() < 992)
(只有在调整大小时才会发生,如果我用992px以上的窗口刷新,它会正常工作)。
那么,这种调整大小是否干扰了$(window).width()
的识别?(当我控制台记录它时,它会显示正确的宽度大小)。
我的代码:
$(function()
{
var $header = $('header.top');
var $input = $header.find('input[type=search]');
var $search = $header.find('div.search');
var $container = $('main#content');
var $searchBtn = $search.find('button.icon-search');
var $closeBtn = $search.find('span.icon-cross');
$closeBtn.css('display', 'none');
function fixedTopCheck()
{
if ($(window).width() < 992)
{
$(window).on('scroll', function()
{
if ($(window).scrollTop() > 75)
{
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
// Turn top into fixed menu
$header.addClass('fixed');
$container.addClass('fixed');
// Hide search bar and make it smaller
$input.css('display', 'none');
// Prevent search button to search
$searchBtn.on('click', function(e) {
e.preventDefault();
});
// Open search bar when clicking button
$(document).on('click','.icon-search',function()
{
$searchBtn.unbind('click');
$input.css('display', 'inline-block');
$searchBtn.css('display', 'none');
$closeBtn.css('display', 'inline-block');
$input.focus();
});
// Close search bar when clicking button
$(document).on('click','.icon-cross',function()
{
$searchBtn.on('click', function(e)
{
e.preventDefault();
});
$input.css('display', 'none');
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
});
}
else
{
// Reverse fixed menu
$header.removeClass('fixed');
$container.removeClass("fixed");
$input.css('display', 'inline-block');
// Return search function
$searchBtn.unbind('click');
// Reset search form when going top and search form is still opened
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
});
}
else
{
console.log("hello");
// Remove fixed top
if($header.hasClass("fixed"))
{
$header.removeClass("fixed");
}
if($container.hasClass("fixed"))
{
$container.removeClass("fixed");
}
$searchBtn.css('display', 'inline-block');
$closeBtn.css('display', 'none');
}
}
fixedTopCheck();
// if window is resized check again
$( window ).resize(function() {
fixedTopCheck();
});
});
您的代码遵循了许多错误做法。
-
不要把你的活动听众嵌套在一起。这将导致每次容器事件触发时在同一组件上设置一个事件侦听器(每次调整大小都非常繁重)。
-
不要使用bind和unbind,而是检查每个事件内部的宽度,并根据情况执行操作。
-
在您的情况下,替换绑定和解除绑定的另一个解决方案是保留默认的按钮事件,但禁用该按钮,使其无法单击而不是解除绑定。
这将回答您的问题:
- 在resize中添加事件不会使它们只在if语句中的大小上工作,您必须将事件放在resize事件之外,并在滚动和大小上检查该事件何时发生
加载页面时,页面宽度为<992px,创建滚动事件。当您将大小调整为>992px时,滚动事件仍将存在。我建议在页面加载时只绑定滚动事件一次(而不是每次调整大小之后),并检查该方法内部的宽度,以决定滚动时应该做什么。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何在 API 调用后和 if 语句中启用提交按钮
- 带有多个elseif的Javascript if语句
- Sharepoint JScript if语句未执行
- for循环中的javascript if语句找不到==
- jquery if语句返回return wong语句
- 在if语句下的html中使用javascript变量
- 将错误与if语句混淆
- 循环通过数组的If语句不起作用
- jQuery模板中的If语句
- 如何从数据库中回显If语句
- 如何减少if语句的数量
- 在Javascript中将一个值和字符串数组转换为if语句
- Dropbox oauth认证的IF语句的第二部分是't已触发
- MVC Jquery-按钮点击-获取if语句错误
- 如何重写Javascript If语句以选择Classes而不是ID's的HTML格式
- KnockoutJS:为虚拟元素使用嵌套的条件if语句
- If语句发布或操作员发布
- 清除函数中if语句内部不起作用的间隔
- 使用if语句重新循环