我正在尝试使用Bulma框架制作一个WordPress主题，并在菜单上添加横幅。我已尝试使用 navbar 类下的 navbar is-fixed-top 类来获得以下内容，以获得我想要的外观，但导航栏是固定顶部< / strong>仍然显示在导航栏之上，当我在页面顶部编写一些JS来更改CSS但它仍然保留在 is-fixed-top 之上。我可能只是错过了一些简单的东西，但任何帮助都会很棒。我正在添加我的代码的狙击，但内容已被更改。
的header.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';
}
的style.css
#topnavbar {
margin: 0;
}
我尝试了其他一些方法，但没有一种方法有效。
答案 0 :(得分：0)
您可以为固定导航栏使用自定义解决方案，而不是尝试调整.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>