Jquery在调整大小时忽略if语句

Jquery ignores if-statement when resizing

本文关键字:if 语句 小时 调整 Jquery      更新时间:2023-09-26

我写了一个函数,如果你在设备(< 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();
    });
});

您的代码遵循了许多错误做法。

  1. 不要把你的活动听众嵌套在一起。这将导致每次容器事件触发时在同一组件上设置一个事件侦听器(每次调整大小都非常繁重)。

  2. 不要使用bind和unbind,而是检查每个事件内部的宽度,并根据情况执行操作。

  3. 在您的情况下,替换绑定和解除绑定的另一个解决方案是保留默认的按钮事件,但禁用该按钮,使其无法单击而不是解除绑定。

这将回答您的问题:

  1. 在resize中添加事件不会使它们只在if语句中的大小上工作,您必须将事件放在resize事件之外,并在滚动和大小上检查该事件何时发生

加载页面时,页面宽度为<992px,创建滚动事件。当您将大小调整为>992px时,滚动事件仍将存在。我建议在页面加载时只绑定滚动事件一次(而不是每次调整大小之后),并检查该方法内部的宽度,以决定滚动时应该做什么。