Question

以下是我现在可以使用的内容，但是如果窗口宽度小于1024，它仍然会触发，即使它仅在1024以上时设置为触发

$(function () {

    $('#hamburger').click(function () {
        $('div.burger_nav').slideToggle();
    });

    $(window).resize(function () {
        if ($(window).width() < 1024) {
            $('.nav_shown').hide();
            $('div.footerdiv_2').hide();
            $('div.hidden_nav').hide();
            $('div.burger_btn').show();
            $('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
        } //end of if

        else {
            $(".nav_shown").show();
            $('.footerdiv_2').show();
            $('div.burger_btn').hide();
            $('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');

            $(document).scroll(function () {
                var headerShow = $(this).scrollTop();
                if (headerShow > 200) {
                    $('div.hidden_nav').fadeIn();
                    $(".nav_shown").hide();
                } else {
                    $('div.hidden_nav').fadeOut();
                    $(".nav_shown").show();
                }
            });
        } //end of else
    });
});

Answer 1

当窗口到达某个断点时，您似乎想要修改文档，在本例中为1024像素。这被称为响应式网页设计。

不是每次调整大小时都更新屏幕，而是设置触发断点的标志很有用。

$(function() {

    $('#hamburger').click(function(){
        $('div.burger_nav').slideToggle();
    });

    var currentlySmall = false;
    function update() {
        if ($(window).width() < 1024 && !currentlySmall) {
            currentlySmall = true;
            console.log('Less than 1024');

            $('.nav_shown').hide();
            $('div.footerdiv_2').hide();
            $('div.hidden_nav').hide();
            $('div.burger_btn').show();
            $('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
        }
        else if ($(window).width() >= 1024 && currentlySmall) {
            currentlySmall = false;
            console.log('More than 1024');

            $(".nav_shown").show();
            $('.footerdiv_2').show();
            $('div.burger_btn').hide();
            $('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');
        }
    }

    //Calling this in the else part above will bind a new scroll event each time
    //Instead, if this should only happen when the screen is large, use the 
    //flag you created
    $(document).scroll(function () {
        if (!currentlySmall) {
            var headerShow = $(this).scrollTop();
            if (headerShow > 200) {
                $('div.hidden_nav').fadeIn();
                $(".nav_shown").hide();
            } else {
                $('div.hidden_nav').fadeOut();
                $(".nav_shown").show();
            }
        }
    });

    $(window).resize(update);
    update(); //Force initial calculation since resize won't be called when page loads
});

现在，您在上述update()功能中所做的更改只会在屏幕大小超过1024断点而不是每次调整屏幕大小时发生。

小提琴：http://jsfiddle.net/25nfqxzk/1/

修改扩展blgt的评论，我不认为你需要在if-else中绑定scroll事件。它可以在外部分配，也可以使用相同的触发标志。

函数触发窗口宽度但如果大于设置宽度则不会关闭

1 个答案: