Question

我发现这个很酷的框架使用flex作为它的网格。 http://bulma.io/

我的标题设置如下：

<header class="header">
  <div class="container">
    <!-- Left side -->
    <div class="header-left">
      <a class="header-item" href="#">
        <!-- <h1 class="title is-1">VapesForVets</h1> -->
      </a>

    </div>

    <!-- Hamburger menu (on mobile) -->
    <span class="header-toggle">
      <span></span>
      <span></span>
      <span></span>
    </span>

    <!-- Right side -->
    <div class="header-right header-menu">
      <span class="header-item is-active">
        <a href="#" class="header-tab is-active">Home</a>
      </span>
      <span class="header-item">
        <a href="#">Why Us?</a>
      </span>
      <span class="header-item">
        <a href="#">FAQs</a>
      </span>
      <span class="header-item">
        <a href="#">Medical</a>
      </span>
      <span class="header-item">
        <a href="#">Contact</a>
      </span>
    </div>
  </div>
</header>

当我给标题一个位置：固定;导航栏中的所有项目都会浮动到左侧。

Answer 1

你走了。

刚刚添加了自定义CSS和jQuery脚本。

<强> CSS：

.navbar-fixed {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}

<强> jQuery的：

$(document).ready(function() {
    $(window).scroll(function() {
        var headerHeight = $('header').height();
        if($(window).scrollTop() > headerHeight) {
            $('header.header').addClass('navbar-fixed');
        } else if($(window).scrollTop() < headerHeight) {
            $('header.header').removeClass('navbar-fixed');
        }
    });
});

https://jsfiddle.net/jLm23LL0/

修复了带有flexbox的导航栏

1 个答案: