要素へのスムーズなスクロールがあります。アクティブなクラスが選択された li に追加されます。アクティブなクラスが現在の要素liに追加されていないため、マウスで下にスクロールするまで、すべてが正常に機能しています。
私は使っている：
<ul class="features">
<li class="active"><a href="#block1">block 1</a></li>
<li class="active"><a href="#block2">block 2</a></li>
<li class="active"><a href="#block3">block 3</a></li>
<li class="active"><a href="#block4">block 4</a></li>
</ul>
<div id="block1">my content....</div>
<div id="block2">my content....</div>
<div id="block3">my content....</div>
<div id="block4">my content....</div>
Jクエリ:
$('.menu-features li > a').click(function() {
$('.menu-features li').removeClass();
$(this).parent().addClass('active');
});
$('a[href^="#"]').click(function() {
$('html,body').animate({ scrollTop: $(this.hash).offset().top-120}, 700);
return false;
e.preventDefault();
});
ビュー内の要素を検出するためにウェイポイントプラグインを使用しようとしましたが、li をブロック ID と同じ ID でマークするにはどうすればよいですか?
私が使用した：
$('#block3').waypoint(function(direction) {
$('.menu-features li').addClass('test')
});
ただし、すべての li 要素にテスト クラスを追加しますが、現在表示されている要素には追加しません。