javascript - 根据屏幕尺寸运行脚本

Question

我尝试仅在屏幕尺寸大于 750px 时运行脚本，如果不是，则脚本不会运行。我尝试编写一些代码来执行此操作，但它仅适用于页面刷新。例如，我的脚本使侧面板 (.link-panel) 在到达 (.footer) 时停止。当我输入屏幕尺寸代码时，当我将屏幕尺寸调整到 750 像素时，它可以工作，但是当我重新调整尺寸时，脚本无法正常工作，需要刷新页面才能再次工作。

jQuery(第一个解决方案)

if ($(window).width() >= 750) {
    var windw = this;
    $.fn.followTo = function(elem) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top + -40,
            thisHeight = $this.outerHeight(),
            setPosition = function() {
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 60
                    });
                }
            };
        $window.resize(function() {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };

    $('.cover').followTo('.footer');

}

jQuery 第二种解决方案

if ($(".link-panel").css("float") == "left") {
    var windw = this;
    $.fn.followTo = function(elem) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top + -40,
            thisHeight = $this.outerHeight(),
            setPosition = function() {
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 60
                    });
                }
            };
        $window.resize(function() {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };

    $('.cover').followTo('.footer');

}

我的第二个解决方案仅在 .link-panel 上的 float 属性为 left 时运行脚本。当页面为 750 像素时，我的 float: left 属性在媒体查询中被删除。与上一个解决方案一样，该解决方案仅适用于页面刷新。我怎样才能做到这样，如果用户将大小从 <= 750px 调整到 > 750px 他们不需要刷新页面以使脚本正常工作？

Answer 1

对于第二个选项，放置 if 语句来检查窗口调整大小事件中的 css 属性，例如:

$(window).resize(function(){    
    if($(".link-panel").css("float") == "left"){
        -- Rest of code here --
    }else{
        -- Other option if check is false --
    }
});

(在我看来)这是完成您想要做的事情的最佳方式，因为在响应式网站上工作时，CSS 媒体查询可以变得非常具体。