BS4 прозрачная наклейка в рулоне над изображением героя - PullRequest
Новая
       14

BS4 прозрачная наклейка в рулоне над изображением героя

0 голосов
/ 17 марта 2019

Я пытаюсь достичь этой панели навигации: 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, эффект срабатывает, "fixed-top" добавляется как класс на navbar, захватывает сверху, все в порядке.

Моя проблема в том, чтобы вытащить «главный» элемент вверх!Я должен установить его на 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)
  {
...

Но если я не работаю правильно, делаяпромежуток, подобный этому: enter image description here

Хотя панель навигации уже имеет высоту 70px, на верхнем поле «main» это не так.

Я жарюмозги пытаются найти решение для этого, и я хотел бы сделать это как можно более семантическим.

Есть идеи?

Спасибо!Ragards

...