Question

我编写了一个函数，如果向下滚动设备（$header），我的顶栏（< 992）会被修复。当我调整大小时，我再次使用函数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();
    });
});

Answer 1

您的代码遵循很多的不良做法。

不要将事件侦听器嵌套在彼此中。这将导致每次其容器事件触发时在同一组件上设置一个事件监听器（在每次调整大小时都非常重）以及。
而不是使用bind和unbind，检查每个事件中的宽度并根据具体情况执行操作。
在你的情况下替换bind和unbind的另一个解决方案是保留默认按钮事件，但禁用按钮使其无法单击而不是取消绑定。

这将回答你的问题：

在resize中添加事件，不会使它们只在if语句中使用该大小，你必须将事件放在resize事件之外，并检查滚动和大小上是否发生该事件。

Answer 2

加载页面并且页面宽度<992px时，将创建滚动事件。当您调整大小为＆gt; 992px时，滚动事件仍将存在。我建议仅在页面加载时绑定滚动事件一次（不是在每次调整大小之后），并检查该方法的宽度，以确定滚动时它应该做什么。

调整

2 个答案: