Цвет панели навигации меняется в соответствии с разделом - PullRequest
Новая
       27

Цвет панели навигации меняется в соответствии с разделом

0 голосов
/ 04 декабря 2018

Я пытаюсь создать свою веб-страницу таким образом, чтобы цвет панели навигации менялся в соответствии с разделом, который читает пользователь.Например, когда пользователь находится в красной секции, панель навигации должна быть красной и т. Д. Примечание: я использую 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;
}

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

На самом деле мой вопрос ясен, но многие просто проголосовали, даже не объяснив, почему.Надеюсь, сам разобрался с ответом.Решение состоит в том, чтобы сделать фон панели навигации прозрачным только с помощью css.JavaScript не требуется: 

.navbar {
background-color: transparent;
background-image: none;
}
0 голосов
/ 04 декабря 2018

Вам нужно добавить некоторые jquery для добавления и удаления необходимых классов 

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

Вот рабочая демонстрация вашего кода, и только я добавил функциональность в синий раздел. демо

...