Блог

Главная - Вопросы по программированию - Как сохранить элемент активным в css в навигационной системе с scrollspy?

Как сохранить элемент активным в css в навигационной системе с scrollspy?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Редактировать: я отредактировал свой исходный пост, потому что он был слишком длинным, и я упростил код, добавив только то, что было необходимо для понимания проблемы.

Здравствуйте,

В настоящее время я разрабатываю дизайн временной шкалы для своего веб-сайта. Для этого я использую внешний скрипт scrollspy: https://github.com/cferdinandi/gumshoe

Я хочу, чтобы круги оставались активными во время выполнения, поэтому я использовал для этого некоторый css-селектор

 #my-awesome-nav :first-child ~ li:not(.active, .active ~ li) .color-change {
  background-color: rgb(255, 251, 0);
}

Однако с помощью этого селектора все круги активны до достижения первого круга, а затем первый круг не будет сохранять активное состояние, пожалуйста, смотрите Пример ниже (в полноэкранном режиме):

 var spy = new Gumshoe('#my-awesome-nav a'); 
 .container {
  display: flex;
}

.stem-nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

#my-awesome-nav {
  position: fixed;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#my-awesome-nav li {
  padding-bottom: 25px;
}

#my-awesome-nav li a {
  border: solid 3px black;
  border-radius: 50%;
  display: inline-block;
  background-color: #1F2933;
}

#my-awesome-nav li a .color-change {
  height: 40px;
  width: 40px;
  background-color: #1F2933;
  border-radius: 50%;
}

#my-awesome-nav li.active a .color-change {
  background-color: rgb(255, 251, 0);
}

#my-awesome-nav :first-child ~ li:not(.active, .active ~ li) .color-change {
  background-color: rgb(255, 251, 0);
}

.nav-item {
  padding-top: 200px;
  display: flex;
  flex-direction: column;
}

.nav-item > div {
  height: 500px;
  width: 800px;
}

#step-one {
  background-color: yellow;
}

#step-two {
  background-color: red;
}

#step-three {
  background-color: green;
}

#step-four {
  background-color: blue;
}

#step-five {
  background-color: purple;
} 
 <script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe@4/dist/gumshoe.polyfills.min.js"></script>
<div class="container">
  
  <div class="stem-nav">
    <ul id="my-awesome-nav">
      <li><a href="#step-one">
          <div class="color-change"></div>
        </a></li>
      <li><a href="#step-two">
          <div class="color-change"></div>
        </a></li>
      <li><a href="#step-three">
          <div class="color-change"></div>
        </a></li>
      <li><a href="#step-four">
          <div class="color-change"></div>
        </a></li>
      <li><a href="#step-five">
          <div class="color-change"></div>
        </a></li>
    </ul>
  </div>

  <div class="nav-item">
    <div id="step-one"></div>
    <div id="step-two"></div>
    <div id="step-three"></div>
    <div id="step-four"></div>
    <div id="step-five"></div>
  </div>
  
</div>

Ответ №1:

Я исправил свою проблему, я переключился с css на javascript, чтобы решить ее, я не мог найти способ решить ее с помощью css. Я удалил эту строку:

 #my-awesome-nav :first-child ~ li:not(.active, .active ~ li) .color-change {
  background-color: rgb(255, 251, 0);
}

Затем я добавил этот javascript:

 var spy = new Gumshoe('#my-awesome-nav a');
let navUl = document.getElementById("my-awesome-nav");
document.addEventListener('gumshoeActivate', function (event) {
    var li = event.target;

  let children = navUl.children;
  for(let i = 0; i < li.dataset.index; i  ) {
    children[i].className = "active";
  }
}, false);

Конечный результат:

 var spy = new Gumshoe('#my-awesome-nav a');
let navUl = document.getElementById("my-awesome-nav");
document.addEventListener('gumshoeActivate', function (event) {
    var li = event.target;

  let children = navUl.children;
  for(let i = 0; i < li.dataset.index; i  ) {
    children[i].className = "active";
  }
}, false); 
 .container {
  display: flex;
}

.stem-nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

#my-awesome-nav {
  position: fixed;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#my-awesome-nav li {
  padding-bottom: 25px;
}

#my-awesome-nav li a {
  border: solid 3px black;
  border-radius: 50%;
  display: inline-block;
  background-color: #1F2933;
}

#my-awesome-nav li a .color-change {
  height: 40px;
  width: 40px;
  background-color: #1F2933;
  border-radius: 50%;
}

#my-awesome-nav li.active a .color-change {
  background-color: rgb(255, 251, 0);
}

.nav-item {
  padding-top: 200px;
  display: flex;
  flex-direction: column;
}

.nav-item > div {
  height: 500px;
  width: 800px;
  padding-bottom: 500px;
}

#step-one {
  background-color: yellow;
}

#step-two {
  background-color: red;
}

#step-three {
  background-color: green;
}

#step-four {
  background-color: blue;
}

#step-five {
  background-color: purple;
} 
 <script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe@4/dist/gumshoe.polyfills.min.js"></script>
<div class="container">
  
  <div class="stem-nav">
    <ul id="my-awesome-nav">
      <li data-index="0"><a href="#step-one">
          <div class="color-change"></div>
        </a></li>
      <li data-index="1"><a href="#step-two">
          <div class="color-change"></div>
        </a></li>
      <li data-index="2"><a href="#step-three">
          <div class="color-change"></div>
        </a></li>
      <li data-index="3"><a href="#step-four">
          <div class="color-change"></div>
        </a></li>
      <li data-index="4"><a href="#step-five">
          <div class="color-change"></div>
        </a></li>
    </ul>
  </div>

  <div class="nav-item">
    <div id="step-one"></div>
    <div id="step-two"></div>
    <div id="step-three"></div>
    <div id="step-four"></div>
    <div id="step-five"></div>
  </div>
  
</div>