響應式粘滯邊欄，需要更新寬度

Question

我有一個響應式粘滯邊欄從這裏開始：http://codepen.io/cmegown/pen/fjqzH。我已經將粘性部分向下，它的響應速度與原始視口寬度的寬度有關。但是，如果向下滾動，然後更改視口大小，則會看到側欄的寬度不會更改。

我知道我需要更新sidebarWidth變量，但我確定如何/在哪裏做到這一點。

任何幫助表示讚賞，謝謝！

編輯： 這一種在其他項目中被留下，但我回來完成這一點。我有一點點進一步，但似乎無法弄清楚如果用戶向下滾動頁面然後展開瀏覽器（或旋轉他們的設備）如何更新側邊欄寬度。我在JS面板中留下了一些評論代碼。

Answer 1

只需在您的滾動功能中進行寬度計算。

$(function() { 
    // cache selectors 
    var wrapper = $('.wrapper'); 
    var sidebar = $('.sidebar'); 

    // get some maths 

    var sidebarTop = sidebar.offset().top; 
    var sidebarOffset = 25; // is .wrapper padding 

    // sticky logic 
    $(window).on('scroll', function() { 
    var windowTop = $(window).scrollTop(); 
    var sidebarWidth = Math.round(wrapper.width() * 0.3); // is .sidebar width 
    if (sidebarTop < (windowTop + sidebarOffset)) { 
     sidebar.css({ 
     position: 'fixed', 
     top: sidebarOffset, 
     width: sidebarWidth 
     }) 
    } else { 
     sidebar.css({ 
     position: 'static', 
     width: '30%' // original CSS value 
     }) 
    } 
    }) 
}) 

這裏有一點點的開銷，因爲它每次滾動時都要計算寬度。另一種方法是將其放入一個$(window).resize()函數中，以便在調整窗口大小時計算出寬度。