html - 使用 flexbox 固定导航栏

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>

当我给header一个position:fixed;导航栏中的所有元素都向左浮动。

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/