Прокрутите к условному обозначению для планшета и мобильного телефона

Question

У меня есть следующая первая часть, которая отлично работает, которая прокручивается вверх (допускает фиксированную навигацию) и останавливает 155 пикселей сверху. Однако, когда мы доходим до планшета, заголовок падает до глубины 75 пикселей, а затем до 65 пикселей на мобильном телефоне.

Есть ли способ условно прокрутить страницу до другой позиции, основанной на высоте css навигационной панели? Заключенный раздел - это то, с чем я играл.

$('a[href^="#"]').on('click', function(event) { 

      var target = $($(this).attr('href')); 

      if(target.length) { 
       event.preventDefault(); 
       $('html, body').animate({ 
        scrollTop: (target.offset().top)-155 
       }, 1000); 
      } 

      // else if ($(".dl-menuwrapper button").css("height") === "65px") { 
      //  $('html, body').animate({ 
      //   scrollTop: (target.offset().top)-75 
      //  }, 1000); 
      // } 

     }); 

У кого-нибудь есть идеи, поэтому я могу получить эту работу с двумя дополнительными высотами для планшета и мобильного телефона?

Answer 1

Я бы получил высоту навигационной панели в качестве переменной, поэтому не имеет значения, какое устройство используется.

$('a[href^="#"]').on('click', function(event) { 
     var target = $($(this).attr('href')), 
      navBarHeight = $(".nav").height(); 

     if(target.length) { 
      event.preventDefault(); 
      $('html, body').animate({ 
       scrollTop: (target.offset().top) - navBarHeight 
      }, 1000); 
     } 

    }); 

Очевидно, что изменение $(".nav") использовать правильный селектор для вашей цели. Вы также можете добавить смещение, добавив константу в navBarHeight.