1

リンクがクリックされると、ページがリスト内の対応するアイテムまでスクロールダウンし、アイテムに到達したときにリンクのクラスを変更するナビゲーションを設定しました。

<nav>
<a href="#one" class="anchorLink">one</a>
<a href="#two" class="anchorLink">two</a>
</nav>


<ul>
    <li id="one"></li>
    <li id="two"></li>
</ul>

これはかなり大雑把な例です

http://jsfiddle.net/FSk5Q/1/

また、アイテムに到達したら背景色を変更し（できれば新しい色にフェードイン）、別のアイテムをスクロールしたときに元のクラスに戻し、次のアイテムのクラスを変更したいと思います。

アドバイスをありがとう。js部門ではあまり良くありません。

4

1 に答える 1

2

これをそれほど複雑にする必要はありません。可能な場合は、CSSトランジションを使用するだけです。

li:target {
    background-color: #f90;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

JSフィドルデモ。

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  background: #fff;
  width: 10%;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid #000;
}
.highlight {
  background: #b4b4b4;
}
ul li {
  list-style: none;
  margin-bottom: 10px;
  width: 300px;
  height: 500px;
  background: #ccc;
}
li:target {
  background-color: #f90;
  -moz-transition: all 2s linear;
  -ms-transition: all 2s linear;
  -o-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 2s linear;
}
li::before {
  content: 'list-element ' attr(id);
  display: block;
  text-align: right;
  font-size: 2em;
  font-weight: bold;
}
<nav>
  <a href="#one" class="anchorLink">one</a>
  <a href="#two" class="anchorLink">two</a>
</nav>


<ul>
  <li id="one"></li>
  <li id="two"></li>
</ul>

于 2013-03-04T21:28:22.837 に答える