如何更新窗口滾動側面菜單調整

Question

請看看一個網站我發展：http://coccolejarvis.com/

你會看到右手菜單棒，當你達到一定點。這可以很好地節省設計中的空白區域，但問題是如果調整瀏覽器窗口的大小，側欄的寬度不會改變（它必須有固定的寬度才能工作）。

如何在窗口大小調整後自動調整側欄的寬度？我用下面的代碼現在：

$(window).load(function() { 

    var sideBar = $('.side-nav'), 
     sideBarSideOffset = $('#page-main').offset().left, 
     mainColHeight = $('.main-col').height(), 
     sideBarHeight = sideBar.height(), 
     sideBarWidth = sideBar.width(), 
     footerOffset = $('footer').offset().top, 
     contentOffset = $('#page-main').offset().top, 
     yOffset, 
     winHeight = $(window).height(), 
     currentLocationHeight = $("#current-location").height() + 40; 

    if (mainColHeight > sideBarHeight) { 

     sideBar.addClass('absolute-position'); 

     sideBar.css({"width": sideBarWidth}); 

     function fixSideBar() { 

      yOffset = yOffset || $("#current-location").offset().top; 
      var winScroll = $(window).scrollTop(); 

      if (winScroll >= yOffset-winHeight +currentLocationHeight && winScroll<footerOffset-winHeight) { 
       sideBar.removeClass('bottom').addClass('fixed'); 
       sideBar.css({"right": sideBarSideOffset}); 
      } else if (winScroll >= (footerOffset-winHeight)) { 
       sideBar.removeClass('fixed').addClass('bottom'); 
       sideBar.css({"right": 0}); 
      } else { 
       sideBar.removeClass('fixed bottom'); 
       sideBar.css({"right": 0}); 
      } 

     } 

     fixSideBar(); 
     $(window).scroll(function(){fixSideBar()}); 

    } 

}); 

Answer 1

取而代之的是：

$(window).load(function() { 

名稱的功能，像這樣：

function sizeSidebar() { 

然後調用加載的功能和調整大小：

$(window).on('load resize', function() { 
    sideSidebar(); 
});