javascript - JQuery 调整大小仅在全屏启动时有效

Question

我不太擅长 JQuery，所以我希望这里的任何人都可以帮助我。

我创建了这个小 JQuery 脚本，用于在调整窗口大小时更改 div 的位置。但是，它仅在全屏启动时有效。

如果我在调整窗口大小时刷新页面，然后调整到更大的窗口，JQuery 将无法工作。我必须全屏刷新页面才能使其再次工作。所以它只在去的路上有效，而在回来的路上无效。

为了表达我的意思，这里有一个 JSFiddle .

如果您从大屏幕开始，您不会在 #rightsection 中看到滚动条。

调整 JSFiddle 结果窗口的大小，并在 #rightcontent 落在 #leftsection 下面时按“运行”。当您放大结果窗口时，#rightsection 内的滚动条就会出现。

如果有人能帮助我解决这个问题，我将不胜感激。

JQuery

$(document).ready(function() {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    if($("#rightsection").hasScrollBar()){
        $('#rightsection').css({
            "position":"static",
            "margin":"-75px 0 -55px 150px"
        });
    }

    $(window).resize(function(){
        var w = $(window).width();
        /*Making the screen smaller*/
        if(w < 960){ 
            $('#rightsection').css({
                "margin":"0"
            });
        }

        /*Making the screen bigger*/
        if(w > 960){ 
            $('#rightsection').css({
                "margin":"-75px 0 -55px 150px"
            });
        }
    });
});

Answer 1

命名您的处理函数，然后在文档就绪和窗口调整大小事件中调用它。

$(document).ready(function() {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    if($("#rightsection").hasScrollBar()){
        $('#rightsection').css({
            "position":"static",
            "margin":"-75px 0 -55px 150px"
        });
    }

    function render()
    {
        var w = $(window).width();
        /*Making the screen smaller*/
        if(w < 960){ 
            $('#rightsection').css({
                "margin":"0"
            });
        }

        /*Making the screen bigger*/
        if(w > 960){ 
            $('#rightsection').css({
                "margin":"-75px 0 -55px 150px"
            });
        }
    }

    // call on document load
    render();


    $(window).resize(function(){
        // call on window resize
        render();
    });
});