jQueryウェイポイントプラグインとscrollToプラグインを使用して、スティッキーヘッダーなどを実現するページがあります(チュートリアルはこちら: http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky -navigation-header-using-jquery-waypoints/)。
ほとんどすべてがうまく機能していますが、サブメニューで確認できる動作に遭遇しました。ページの下の div に対応するリンクをクリックすると、ページが div に応じてスクロールし、メニューが ' で更新されます。選択されたクラス スタイル。ただし、ページは他の div を超えてスクロールしているため、ページがスクロールするにつれて、メニューはアクティブなメニュー項目ごとにアニメーション化されます。関数を削除してから、ページが対応する div に移動するとすぐに復元できるようにして、アクティブなメニュー リンクをアニメーション化するこのフラッシュを削除したいと考えています。ここで私が話していることを確認できます (サブメニューで、シャトルの運転手や受付係などのリンクをクリックすると)。
http://pinnacleahs.com/?page_id=8
waypoints プラグインに remove() メソッドがあることは知っていますが、それを復元する方法がわかりません。また、同じ目的を達成する別の方法があるかもしれません。
私の関数は次のようになります。
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".navContainer");
var nav = $(".navStickyHolder");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
} else {
nav_container.css({ 'height':'auto' });
}
},
offset: 177
});
var sections = $(".servicePanel");
var navigation_links = $(".servicesNavigation li a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('.servicesNavigation li a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");
}, offset: 295
})
navigation_links.click( function(event) {
$.scrollTo(
$(this).attr("href"),
{
duration: 300,
offset: { 'left':0, 'top': -240 }
}
);
navigation_links.removeClass("selected");
$(this).addClass("selected");
});
});