如果瀏覽器寬度發生變化，請運行腳本

Question

我有一個1頁的網站，當點擊導航按鈕時，它會滾動到選定的div。

在寬度爲1006px或更大的瀏覽器上，標題將顯示高度：60px;它固定在頂部。

我有以下的腳本，它在超過1006px的瀏覽器寬度上工作得很好，但在移動版本上，我在頂部獲得60px的間隙。

這是我需要編輯

var offsetHeader = 60; 

和

var divPos = $(theID).offset().top-60; 

行，你會發現，我有60套這是div的高度，我可以將此更改爲0，然後將完美的移動版本，我需要編輯它，以便當瀏覽器的寬度發生變化時，這將改變爲60或0.

這裏是完整的jQuery

jQuery(document).ready(function($) { 
     var offsetHeader = 60; //Add the height of the header if needed, also change line 31 

     $('.scroll').click(function(){ 
      var $target = $($(this).attr('href')); 
      $(this).parent().addClass('active'); 
      $('body').stop().scrollTo($target , 800, {'axis':'y', offset: -offsetHeader}); 
      return false; 
     }); 

     /** 
     * This part handles the highlighting functionality. 
     * We use the scroll functionality again, some array creation and 
     * manipulation, class adding and class removing, and conditional testing 
     */ 
     var aChildren = $("nav ul li").children(); // find the a children of the list items 
     var aArray = []; // create the empty aArray 
     for (var i=0; i < aChildren.length; i++) { 
      var aChild = aChildren[i]; 
      var ahref = $(aChild).attr('href'); 
      aArray.push(ahref); 
     } // this for loop fills the aArray with attribute href values 

     $(window).scroll(function(){ 
      var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page 
      var windowHeight = $(window).height(); // get the height of the window 
      var docHeight = $(document).height(); 

      for (var i=0; i < aArray.length; i++) { 
       var theID = aArray[i]; 
       var divPos = $(theID).offset().top-60; // match the number with the offsetHeader 
       var divHeight = $(theID).height(); // get the height of the div in question 
       if (windowPos >= divPos && windowPos < (divPos + divHeight)) { 
        $("a[href='" + theID + "']").addClass("active"); 
       } else { 
        $("a[href='" + theID + "']").removeClass("active"); 
       } 
      } 

      if(windowPos + windowHeight == docHeight) { 
       if (!$("nav li:last-child a").hasClass("nav-active")) { 
        var navActiveCurrent = $(".nav-active").attr("href"); 
        $("a[href='" + navActiveCurrent + "']").removeClass("nav-active"); 
        $("nav li:last-child a").addClass("nav-active"); 
       } 
      } 
     }); 
    }); 

我在想像下面的代碼，但不知道如何可以與腳本實現它？

function updateContainer() { 
    var $containerWidth = $(window).width(); 
    if ($containerWidth > 1006) { 
     var divPos = $(theID).offset().top-60; 
     var offsetHeader = 60; 
    } else { 
     var divPos = $(theID).offset().top-0; 
     var offsetHeader = 0; 
    } 
} 

Answer 1

使用窗口

$(window).resize(updateContainer).resize(); 

的resize事件通過聲明處理程序後觸發事件，也將觸發頁面加載

Answer 2

我didn'r真正理解的目標，但也許這將有助於：

var cWidth; 

$(window).resize(function() { 
    cWidth = $(window).width(); 
    if (cWidth > 1006) { 
     var divPos = $(theID).offset().top-60; 
     var offsetHeader = 60; 
    } else { 
     var divPos = $(theID).offset().top-0; 
     var offsetHeader = 0; 
    } 
}