Question

我正在尝试仅在屏幕大小大于750px时运行脚本，如果不是，则脚本不会运行。我已经尝试编写一些代码来执行此操作，但它仅适用于页面刷新。例如，我的脚本使我的侧边小组(.footer)）在到达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'); }时停止。当我调整屏幕大小代码时，它会在我将屏幕调整为750px时起作用，但是当我调整大小时，脚本无法正常工作并需要页面刷新才能再次工作。

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');

}

jQuery第二个解决方案

.link-panel

我的第二个解决方案仅在left上的浮动属性为float: left时运行脚本。当页面为750px时，我的html { background-image: url("bg.jpg"); padding: 150px; background-repeat: no-repeat; background-size: 100% 100%; } h1 { line-height: 15px; text-align: center; font-weight: 600; color: rgba(61, 61, 61, 0.7); } h3 { line-height: 0px; text-align: center; font-weight: 100; color: rgba(61, 61, 61, 0.7); } hr { border: 0; color: red; border-bottom: 1px solid rgba(168, 168, 168, 0.92); width: 320px; } p { text-align: center; } body { padding: 25px; max-width: 400px; min-width: 400px; height: 200px; font-family: "Courier New", Courier, monospace; background: #fafafa; margin: auto; border-radius: 3px; box-shadow: 0px 0px 90px rgba(58, 58, 58, 0.71); opacity: 0.95; position: static; } footer { margin-top: 45px; opacity: 0.5; }属性将在媒体查询中删除。此解决方案仅适用于页面刷新，就像上一个解决方案一样。如何在用户从＆lt; = 750px调整为＆gt;的情况下进行调整？ 750px他们不需要刷新页面以使脚本正常工作吗？

Answer 1

对于第二个选项，将if语句检查窗口resize事件中的css属性，如：

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

这是（在我看来）执行您要做的事情的最佳方式，因为在处理响应式网站时，css媒体查询可以非常具体。

Answer 2

将代码包含在函数中并通过$(document).ready()和$( window ).resize()调用两次，调用您的函数两次，每次window resize事件都需要重新检查。

我在下面添加示例，检查它，尝试调整屏幕大小。使用整页并恢复正常，可以看到宽度正在更新。因为你的代码只运行一次。

function mydocwidth(){
  console.log($(document).width());
  //put your code here
}

$(document).ready(function(){
  mydocwidth();
});

$(window).resize(function(){
  mydocwidth();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

根据屏幕大小运行脚本

2 个答案: