Bulma: баннер поверх панели навигации, когда вверху страницы

Я пытаюсь создать тему Wordpress, используя структуру Bulma, с баннером в верхней части моего меню. Я попробовал следующее с классом navbar is-fixed-top в классе navbar, чтобы получить желаемый вид, но navbar is-fixed-top< /strong> по-прежнему отображается над панелью навигации, когда я пишу код JS для изменения CSS в верхней части страницы, но по-прежнему остается с is-fixed-top вверху . Я мог бы просто упустить что-то простое, но любая помощь будет отличной. Я добавляю фрагменты своего кода, но содержимое было изменено.

заголовок.php

...
<body>
  <header class="header">
  <div class="container">
    <nav class="navbar" id="banner">
      <div class="navbar-menu">
        <div class="navbar-brand">
          <a href="<?php echo get_home_url(); ?>">
            <h1 class="title"><?php bloginfo( 'title' ); ?></h1>
            <h2 class="subtitle"><?php bloginfo( 'description' ); ?></h2>
          </a>
        </div>
        <div class="navbar-start">
        </div>
        <div class="navbar-brand">
          <?php
            if ( function_exists( 'the_custom_logo' ) ) {
              the_custom_logo();
            }
           ?>
        </div>
        <div class="navbar-end">
        </div>
        <div class="navbar-brand">
          <div class="columns">
            <div class="column">
              <p class="title is-5">Mailling address</p>
              <p>P.O. Box 1234</p>
              <p>Test, ST 12345</p>
            </div><!-- /column-->
            <div class="column">
              <p class="title is-5">Physical address</p>
              <p>1234 Foobar Ave.</p>
              <p>Test, ST 12345</p>
            </div><!-- /column-->
          </div> <!-- /columns -->
        </div>
      </div>
    </nav>
  </div>
  <div class="container">
  <nav class="navbar is-fixed-top" id="topnavbar">
    <div class="navbar-menu">
      <div class="navbar-start">
      </div>
      <?php if( is_front_page() ) {?>
        <div class="navbar-start">
          <a class="navbar-item" href="#1">1</a>
          <a class="navbar-item" href="#2">2</a>
          <a class="navbar-item" href="#3">3</a>
        </div> <!-- /navbar-start  -->
        <div class="navbar-end">
          <a class="navbar-item" href="#4">4</a>
          <a class="navbar-item" href="#5">5</a>
          <a class="navbar-item" href="#6">6</a>
        </div> <!-- /navbar-end -->
      <?php }
      else {?>
        <div class="navbar-start">
          <a class="navbar-item" href="<?php echo get_home_url();?>#1">1</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#2">2</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#3">3</a>
        </div> <!-- /navbar-start  -->
        <div class="navbar-end">
          <a class="navbar-item" href="<?php echo get_home_url();?>#4">4</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#5">5</a>
          <a class="navbar-item" herf="<?php echo get_home_url();?>#6">6</a>
        </div> <!-- /navbar-end -->
      <?php
      } ?>
      <div class="navbar-end">
      </div>
    </div> <!-- /navbar-menu -->
  </nav>
</div><!-- /container -->
</header>
<div class="body">

foo.js

if (document.body.scrollTop === 0)
{
  document.getElementById('topnavbar').style.top =
  document.getElementById('banner').height() + '!important';
}
else {
 document.getElementById('topnavbar').style.top =
  '0 !important';
}

стиль.css

#topnavbar {
  margin: 0;
}

Я пробовал несколько других способов, но ни один из них не работает.


javascript wordpress html css bulma
person etucker    schedule 06.01.2018    source источник
comment
Можете ли вы объяснить немного больше ... вы хотите, чтобы баннер всегда находился над навигацией? А при прокрутке проблема в том, что нав прыгает вверх над баннером?   -  person sol    schedule 07.01.2018
comment
.affix ? Вы пытаетесь совместить бутстрап с булмой, не адаптируя ни одну из них? просто предположим...   -  person Chay22    schedule 07.01.2018
comment
@sol Я хочу, чтобы баннер был над навигацией в верхней части страницы, иначе я хочу, чтобы навигация была липкой, а баннер исчез.   -  person etucker    schedule 07.01.2018
comment
@ Chay22 извините, должно быть, скопировал неправильную попытку, нужно найти правильную и исправить. У меня было около 100 попыток, поэтому на данный момент код беспорядочный.   -  person etucker    schedule 07.01.2018
comment
Чего вы пытаетесь достичь, если быть точным? Удалить .is-fixed-top при возникновении определенного события? .is-fixed-top делает элемент fixed, он выполняет правильную работу, хотя.   -  person Chay22    schedule 07.01.2018
comment
@ Chay22 Chay22 Я пытаюсь сделать панель навигации липкой, когда баннер не на месте. .is-fixed-top делает навигационную панель липкой, но она также находится над баннером.   -  person etucker    schedule 07.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать собственное решение для своей фиксированной панели навигации вместо того, чтобы пытаться настроить модификатор .is-fixed-top.

Во-первых, получите высоту баннера. Затем, когда пользователь прокручивается выше этой высоты, добавьте класс «фиксация» в вашу навигацию.

Демо ниже...

скрипка

var bannerHeight = $('#banner').height();

$(window).bind('scroll', function() {
  if ($(window).scrollTop() > bannerHeight) {
    $('#topnavbar').addClass('affix');
  } else {
    $('#topnavbar').removeClass('affix');
  }
});
.banner-demo {
  background: black;
  color: white;
  display: flex;
  place-content: center center;
  height: 3em;
  width: 100%;
}

#topnavbar {
  background: pink;
}

#topnavbar.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />
<header class="header">
  <div class="container">
    <nav class="navbar" id="banner">
      <div class="banner-demo">BANNER</div>
    </nav>
  </div>
  <div class="container">
    <nav class="navbar" id="topnavbar">
      <div class="navbar-menu">
        <div class="navbar-start">
        </div>

        <div class="navbar-start">
          <a class="navbar-item" href="#1">1</a>
          <a class="navbar-item" href="#2">2</a>
          <a class="navbar-item" href="#3">3</a>
        </div>
        <!-- /navbar-start  -->
        <div class="navbar-end">
          <a class="navbar-item" href="#4">4</a>
          <a class="navbar-item" href="#5">5</a>
          <a class="navbar-item" href="#6">6</a>
        </div>
        <!-- /navbar-end -->

        <div class="navbar-start">
          <a class="navbar-item" href="<?php echo get_home_url();?>#1">1</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#2">2</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#3">3</a>
        </div>
        <!-- /navbar-start  -->
        <div class="navbar-end">
          <a class="navbar-item" href="<?php echo get_home_url();?>#4">4</a>
          <a class="navbar-item" href="<?php echo get_home_url();?>#5">5</a>
          <a class="navbar-item" herf="<?php echo get_home_url();?>#6">6</a>
        </div>
        <!-- /navbar-end -->

        <div class="navbar-end">
        </div>
      </div>
      <!-- /navbar-menu -->
    </nav>
  </div>
  <!-- /container -->
</header>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni non, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur
  adipisicing elit. Quod, expedita, modi. non, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod,
  expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore,
  inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto,
  facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem
  ipsum d molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis
  ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae
  a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio.
  Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem
  ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consect
  molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni,
  vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero
  error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia
  quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem
  ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consect
  molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni,
  vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero
  error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia
  quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem
  ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectolor
  sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate
  unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in
  enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis
  vitae deleniti ad officia, veritatis ipsum! Magni, vonon, dolor tempore, autem odit voluptate unde neque numquam minus maxime quis ullam ipsum eos est repellat, architecto, facilis nulla asperiores.Lorem ipsum dolor sitsit amet, consectetur adipisicing
  elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur
  sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, voRecusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem
  quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum!
  Magni, voluptatum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima hic deserunt odio quibusdam eos vel, doloribus cumque ab iusto voluptatibus odit sed dicta molestias porro quidem fugiat eum delectus eligendi! amet, consectetur adipisicing
  elit. Quod, expedita, modi. Recusandae a libero error natus tempore, harum eveniet nobis in enim distinctio, voluptas. Veritatis autem quam, molestias iusto recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere consequatur
  sint tempore, inventore distinctio. Mollitia quasi, quidem aut dolorem incidunt perferendis vitae deleniti ad officia, veritatis ipsum! Magni, voluptatum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima hic deserunt odio quibusdam eos
  vel, doloribus cumque ab iusto voluptatibus odit sed dicta molestias porro quidem fugiat eum delectus eligendi!</div>

person sol    schedule 06.01.2018