divがスクロールまたは//クリックされた場合、メニューポイントを強調表示したい。
http://jsfiddle.net/WeboGraph/vu6hN/2/ (それは私が欲しいものの例です)
私のコード:(JS)
$(document).ready(function(){
$('nav a').on('click', function(event) {
$(this).parent().find('a').removeClass('active_underlined');
$(this).addClass('active_underlined');
});
$(window).on('scroll', function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).position().top) {
var id = $(this).attr('id');
$('nav a').removeClass('active_underlined');
$('nav a[href=#'+ id +']').addClass('active_underlined');
}
});
});
});
私(html nav)
<nav>
<div id="cssmenu">
<ul id="horizontalmenu" class="underlinemenu">
<li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a> </li>
<li><a data-scroll href="#skills">skills</a> </li>
<li><a data-scroll href="#workflow">WORKFLOW</a> </li>
<li><a data-scroll href="#portfolio">Portfolio</a> </li>
<li><a data-scroll href="#about">About</a> </li>
<li><a data-scroll href="#kontakt">Kontakt</a> </li>
</ul>
</div>
</nav>
私(css)
.active_underlined a {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
a.active_underlined {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
ここにプロジェクトへのリンク: http://www.f-designs.de/test_onesite
$(this).offset().top
の代わりに$(this).position().top
を使用します
As .position()
は、オフセット親を基準にして、一致する要素のセットの最初の要素の現在の座標を取得します。一方、.offset()
は、一致する要素のセットの最初の要素の現在の座標を取得します、ドキュメントに対して相対的です。
Webサイトでは、_.target
_内のクラスを持つすべてのDIVが内部にあるため、クラス_.target
_のすべての要素は0に等しい値.position().top
を返します。
次のようにclass
条件を作成して、要素がメニューに到達したときにif
が変化するように、オフセット値を減らします。
_if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
_
2018年にこれを発見し、より新しいバージョンのjquery(+1.0)で複製しようとする構文エラーに遭遇しました。最後の行$('nav a[href=#'+ id +']')
では、属性は適切にエスケープされておらず、$('nav a[href="#'+ id +'"]')
のようにする必要があります(「 "」が追加されていることに注意してください)。
これが私がこれを見つけた場所です https://api.jquery.com/attribute-contains-selector/