Добавить дополнительные 160 пикселей перед добавлением / удалением класса?

Question

Я пытаюсь добавить дополнительные 160 пикселей перед добавлением и удалением класса.

Исходный рабочий jQuery:

$.fn.isInViewport = function() {
  let elementTop = $(this).offset().top;
  let elementBottom = elementTop + $(this).outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function() {
  if ($('#main-header').isInViewport()) {
    $('#main-menu').removeClass('hide');
  } else {
    $('#main-menu').addClass('hide');
  }
});

Моя попытка:

$(window).scroll(function() {
  if ($('#main-header').isInViewport() + 160) {
    $('#main-menu').removeClass('hide');
  } else {
    $('#main-menu').addClass('hide');
  }
});

Answer 1

Попробуйте расширить jQuery:

// own custom jQuery function
$.fn.isInViewportWithMargin = function(px) {
  let elementTop = $(this).offset().top - px;
  let elementBottom = elementTop + ( $(this).outerHeight() + px*2 );
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function() {
  if ($('#main-header').isInViewportWithMargin(160)) {
    $('#main-menu').removeClass('hide');
  } else {
    $('#main-menu').addClass('hide');
  }
});