スクロール追従型メニューのハイライトについて教えて下さい。
色々調べたのですが、素人の私レベルでは解決できませんでした・・。
他に良いサンプルがあるとは思いますが、
ttp://getbootstrap.com/customize/
↑のように、長いページをスクロールした際に、画面内に追従するサイドメニューで、
ページをスクロールして行き、一致する見出しの位置に来た時にサイドメニューの該当のリストもハイライトさせる方法です。
実際は画像や背景を切替える程度で考えおり、サイドメニューをスクロールに合わせて追従させる所まではできたのですが、該当位置で画像を切替えるなど、ハイライトさせる方法が分かりません・・。
現状のサイドメニューリストは画像でロールオーバー切替で作成しています。
現状のメニュー追従はCSS、jqueryで動作させています。
アドバイスをいただける方、おられましたらどうかお力添えを宜しくお願いします。
みんなの回答 3 件
スクロールイベントが発生したタイミングで、
var winTop = $(window).scrollTop();
var _menu1 = $(’#menu1’).offset().top;
f(winTop >= _menu1){ ハイライト設定ちょめちょめ};
などで、できませんかね。
全くテストしてないけどこんな感じです。
ちなみにハイライトを書くだけで面倒だったので追随は省きました。
$(window).on(’scroll’, function (event) {
// スクロールポジションを取得
var sccrollTop = $(window).scrollTop();
// スクロールポジションがコンテンツの最上部にみたない場合は
// 無条件でナビゲーション最上部をハイライトさせるため
// スクロールがコンテンツの最上部に足りているかを確認する
// リスト最上部が示すコンテンツのオフセットトップを取得
// コンテンツの場所を特定するためにナビゲーションのhrefを取得する
var topContentId = $(’ul.bs-docs-sidenav li:first-child a’).prop(’href’);
var minContentOffset = $(topContentId).offset().top;
// 最上部のコンテンツまでスクロールしていない場合は
// 先頭のナビゲーションにactiveクラスを付与する
if (scrollTop <= minContentOffset) {
$(’ul.bs-docs-sidenav li’).each(function (event, index) {
if (index === 0) {
$(this).addClass(’active’);
} else {
$(this).removeClass(’active’);
}
});
} else {
// 最上部のコンテンツ以降までスクロールしている場合は
// どのコンテンツまでスクロールしているかを特定する
// それぞれのナビゲーションが示すコンテンツのオフセットを特定する
// 一旦確定したら、それ以降はハイライトさせないようにするために
// 確定したことを示す変数を用意
var isDecided = false;
// 素直に上から順番に調べていくと
// 結構スクロールしたところでは無条件で上にあるコンテンツはヒットしてしまい
// それ以降は調べる余地がなくなってしまうので
// コンテンツを逆さにして調べることでそれを防ぐ
var targetLinkElements = $(’ul.bs-docs-sidenav’).find(’li a’);
targetLinkElements.get().reverse();
targetLinkElements.each(function (event) {
// 既に決まっていたら親のリスト要素のactiveクラスを剥奪する
if (isDecided === true) {
$(this).parent().removeClass(’active’);
} else {
// 当該コンテンツのオフセットを取得
var contentId = $(this).prop(’href’);
var contentOffsetTop = $(contentId).offset().top;
// スクロールが当該コンテンツのオフセットを上回っていればハイライトする
if (scrollTop >= contentOffsetTop) {
$(this).parent().addClass(’active’);
isDecided = true;
} else {
// そうでなければハイライトを解除
$(this).parent().removeClass(’active’);
}
}
});
}
});
追従はjquery.scrollfollow.jsみたいなので、
ハイライトはbootstrapのscrollspy.jsでいけるんじゃね？
関連するトピックス