BS4透明粘性在导航图像上滚动到英雄图像

Question

我正在尝试实现以下导航栏：http://abusinesstheme.com/demo/palas/ 我正在使用BS4.3.1。

我的HTML结构是这样的：

<header>
  <div class="topbar">content</div>
  <nav class="navbar">content</nav>
</header>
<main>
  <div class="hero">content with background image</div>
</main>

我的JS也可以正常工作：

$(function()
{
  var $navbar = $('.navbar');
  var $sticky = $navbar.offset().top;
  // ----------
  $(window).on('load scroll resize',function()
  {
    if($(window).width() > 992)
    {
      if($(window).scrollTop() > $sticky)
      {
        $navbar.addClass('fixed-top');
        $navbar.addClass('shadow');
      }
      else
      {
        $navbar.removeClass('fixed-top');
        $navbar.removeClass('shadow');
      }
    }
  });
});

因此，当宽度大于992px时，效果发生了，“固定顶部”作为类添加到导航栏上，它抓住了顶部，一切都很好。

我的问题是拉起“主要”元素！ 我必须在CSS上设置它：

@media (min-width: 992px)
{
  main {margin-top: -70px;}
}

我试图在992 IF之后添加类似内容：

...
if($(window).width() > 992)
{
  $('main').css('margin-top',-Math.abs($navbar.outerHeight()));
  if($(window).scrollTop() > $sticky)
  {
...

但是，如果我不能正常工作，请像下面这样做：

虽然导航栏已经具有70px的高度，但“主”上的边距顶部却没有。

我正在绞尽脑汁，试图为此找到解决方案，我想使其尽可能地具有语义。

有什么想法吗？

谢谢！ 拉加兹