Question

我正在尝试设计我的网页，以便导航栏颜色更改为与用户正在阅读的部分匹配。例如，当用户位于红色区域时，导航栏应为红色等。 Nota：我正在使用bulma作为CSS库。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<html class="has-navbar-fixed-top">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
  <div class="navbar-brand is-transparent">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu is-transparent">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <div class="container">
      <p class="title">
        Green Fullheight  hero with navbar
      </p>
    </div>
  </div>
</section>
  
<section class="hero is-link is-fullheight">
  <div class="hero-body">
    <div class="container">
      <p class="title">
       Blue Fullheight hero with navbar
      </p>
    </div>
  </div>
</section>
</html>

编辑：

当用户向下滚动或向上滚动时，应更改导航栏。 Dropbox对其首页使用类似的行为： https://www.dropbox.com/

我的解决方案： 包括使导航栏透明：

.navbar {
background-color: transparent;
background-image: none;
}

Answer 1

您需要添加一些jquery来添加和删除所需的类

$(document).ready(function(){
  $("#blue").mouseover(function(){
    $(".navbar").addClass("is-link");  
  });
  $("#blue").mouseout(function(){
    $(".navbar").removeClass("is-link");  
  })
});

这是您的代码的有效演示，只有我在蓝色部分中添加了功能。 demo

Answer 2

实际上，我的问题很明确，但是许多人甚至没有说出原因就投了反对票。希望我自己弄清楚答案。解决方案是仅使用css使导航栏背景透明。无需JavaScript：

.navbar {
background-color: transparent;
background-image: none;
}

导航栏颜色更改以匹配该部分

2 个答案: