Question

我不是很擅长JQuery，所以我希望这里有人可以帮助我。

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

我应该在调整窗口大小时刷新页面，然后调整大窗口，JQuery不起作用。我必须全屏刷新页面才能让它再次运行。所以它只适用于前往的方式，但不适用于返回途中。

为了表明我的意思，这里是JSFiddle。

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

调整JSFiddle Result窗口的大小，然后按＆＃39;运行＆＃39;当#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();
    });
});

Answer 2

简单...如果框大到足以触发hasscrollbar函数，则设置position：static。但如果它没有触发，它就不会首先被设置。

只需将其添加到“制作更大的屏幕”中，您就可以开始了。

另外请注意，我设置宽度触发器如下图所示（因为它不会发生在960px宽的情况下。因为它们都不会被应用）。

$(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 >= 961){ 
            $('#rightsection').css({
                "position":"static",
                "margin":"-75px 0 -55px 150px"
            });
        }
    });
});

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

2 个答案: