javascript - Bulma:位于页面顶部时导航栏顶部的横幅

标签 javascript html css wordpress bulma

我正在尝试使用 Bulma 框架制作一个 Wordpress 主题，菜单顶部有一个横幅。我已经尝试使用 navbar 类下的 navbar is-fixed-top 类来获得我想要的外观，但是 navbar is-fixed-top 仍然显示在 navbar 上方，当我在页面顶部编写一些 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;
}

我尝试了其他几种方法，但都没有用。

最佳答案

您可以为固定导航栏使用自定义解决方案，而不是尝试调整 .is-fixed-top 修饰符。

首先，获取横幅的高度。然后，当用户滚动超过此高度时，向您的导航添加一个“修复”类。

下面的演示...

fiddle 

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>

关于javascript - Bulma:位于页面顶部时导航栏顶部的横幅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48132276/

上一篇：javascript - 在使用 Bootstrap 的响应式设计中，CSS Force 内容低于固定 DIV？

下一篇：html - 尝试使用媒体查询制作元素显示 block

相关文章：

jquery 移动滑动页面，用于类似于 Facebook 的设置

asp.net - 文本太长的 ASP GridView 中的 CSS 问题

php - 相同的 CSS 在不同的域上提供不同的字体大小

javascript - 如何在 gridview 行内展开/折叠时应用过渡效果

javascript - 两个 Highcharts 更新问题

javascript - 如何在 JQuery 中更改 li 元素上的事件类并在单击 li 元素时将用户重定向到指定页面？

regex - 用于文本框验证的 HTML5 正则表达式模式 : allow alphabet, 空格和连字符

php - 如何在条件下使用 str_replace

javascript - server.listen() 实际上做了什么？

javascript - JSON python 到 javascript

©2024 IT工具网  联系我们