scrollto offset variable определяется шириной окна

Question

Ширина окна (viewport) больше, чем [> = 768] У меня есть переменная scrollto offset 125px, которая является моей фиксированной высотой заголовка ... все хорошо. Моя проблема в том, что ширина окна меньше, чем [< = 767] i.e мобильное устройство, мне нужна переменная смещения как 54px, поскольку я сделал свой фиксированный заголовок 54px height.

как можно настроить свой код, чтобы получить этот результат

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'); 
});