由窗口寬度確定的scrollto偏移量變量

Question

大於[> = 768]的窗口寬度（視口）我有一個125px的scrollto偏移量變量，這是我的固定標題高度...都很好。我的問題是當窗口寬度小於[< = 767]即移動設備，我需要偏移量爲54px，因爲我已經使我的固定標題54px高度。

如何調整自己的代碼來獲得這個結果

if($(window).width() >= 768) 
    function scrollToID(id, speed) { 
     var offSet = 125; 
     var targetOffset = $(id).offset().top - offSet; 
     var mainNav = $('#main-nav'); 
     $('html,body').animate({scrollTop: targetOffset}, speed); 
     if (mainNav.hasClass("open")) { 
      mainNav.css("height", "1px").removeClass("in").addClass("collapse"); 
      mainNav.removeClass("open"); 
     } 
    } 

Answer 1

那麼它看起來像我這整個代碼塊只能只要屏幕寬度大於768px更大......這將使它無用的，如果無論如何，它都較小。我會像這樣設置它。

$(window).on("resize load", function() { 
      if($(window).width() >= 768) { 
       var offSet = 125; 
      } 
      else{ 
       var offSet = 54; 
      } 
    }); 

function scrollToID(id, speed) { 
     var targetOffset = $(id).offset().top - offSet; 
     var mainNav = $('#main-nav'); 
     $('html,body').animate({scrollTop: targetOffset}, speed); 
     if (mainNav.hasClass("open")) { 
      mainNav.css("height", "1px").removeClass("in").addClass("collapse"); 
      mainNav.removeClass("open"); 
     } 

或更好，但你可以抓住CSS類，所以你永遠不必手動設置它。

$(window).on("resize load", function() { 
       var offSet = $('#yourheader').css('height'); 
});