JQuery調整大小隻適用於全屏幕啓動

我不是很擅長JQuery，所以我希望這裏的任何人都可以幫助我。JQuery調整大小隻適用於全屏幕啓動

我創建了這個小的JQuery腳本，在調整窗口大小時更改div的position。但它只在全屏幕啓動時才起作用。

當窗口調整大小時，我應該刷新頁面，然後調整到更大的窗口，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" 
      }); 
     } 
    }); 
});

來源

2015-04-20 Vasco

名稱的處理函數，然後內文件準備和窗口中調整大小事件調用它。

$(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(); 
    }); 
});

來源

2015-04-20 10:19:11 qtgye

完美，謝謝。我會記住這種方法在將來我應該再次遇到這種問題。 – Vasco

請顯示你的代碼.. – qtgye

@gtgye沒有等待。當我添加更多文本時，它仍然不固定。 – Vasco

簡單...如果框的大小足以觸發hasscrollbar函數，則position：static正在設置。但是，如果它不觸發，首先它不會被設置。

只需將它添加到'製作屏幕更大'，你就會很好去。作爲另一個說明，我將設置寬度觸發器，如下所示（因爲它不會在960像素寬的情況下發生，因爲它們都不會被應用）。

$(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" 
      }); 
     } 
    }); 
});

來源

2015-04-20 10:51:57

JQuery調整大小隻適用於全屏幕啓動

回答

相關問題