根據屏幕大小運行腳本

Question

我僅在屏幕尺寸大於750px時嘗試運行腳本，如果不是，則腳本不會運行。 我嘗試編寫一些代碼來執行此操作，但它僅在頁面刷新時有效。 例如，我的腳本使側面面板(.link-panel ）到達(.footer)時停止。 當我放置屏幕尺寸代碼時，當我將屏幕尺寸縮小到750px時，它可以工作，但是當我重新調整屏幕尺寸時，腳本無法正常工作，需要刷新頁面才能再次工作。

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

}

我的第二個解決方案僅在left .link-panel float屬性時才運行腳本。 頁面為750px時，媒體查詢中刪除了我的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媒體查詢變得非常具體。

Answer 2

將代碼包裝到函數中，然后通過$(document).ready()和$( window ).resize()調用兩次，兩次調用函數，每次window resize事件都需要重新檢查。

我在下面添加示例，進行檢查，嘗試調整屏幕大小。 使用整頁並恢復正常后，您可以看到寬度正在更新。 因為您的代碼只能運行1次。

 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>