Sticky コンポーネントを使用してタブ ナビゲーションとスクロール ナビゲーションを実装する方法

スティッキー コンポーネントは通常、Web ページが特定の領域でスクロールするときに、ユーザーが機能をすばやく実行できるように、ナビゲーション バーやツールバーなどの要素がページの上部または下部に固定されます。そのような要素によって提供されます。

この記事では、Sticky コンポーネントの実装の改善 では、Sticky コンポーネントの改良版を提供し、デモンストレーション効果をブログに適用しています。 Sticky のようなシンプルなコンポーネントを使用すると、この記事で紹介するタブ ナビゲーションやスクロール ナビゲーションなど、よりリッチなエフェクトを開発することができます。実装は簡単で、デモンストレーション効果は次のとおりです:

タブ ナビゲーション (tab-sticky.html に対応):

スクロール ナビゲーション (nav-scroll-sticky.html に対応):

1. タブナビゲーションの実装

タブ ナビゲーションの要件は次のとおりです。ナビゲーション項目をクリックすると、タブのコンテンツを切り替えるだけでなく、スクロールを制御し、表示するタブのコンテンツを一番上に配置し、スティッキー要素のすぐ下に表示する必要があります。デモはブートストラップで作成しているため、ブートストラップが提供するタブコンポーネントは非常にシンプルで使いやすく、タブコンポーネントが提供するshow.bs.tabのイベントコールバック内でスクロール制御処理を行うことができるので、この効果は比較的簡単です。実装するには:

<script>
var $target = $('#target');
new Sticky('#sticky', {
unStickyDistance: 60,
target: $target,
wait: 1,
isFixedWidth: false,
getStickyWidth: function($elem) {
return $elem.parent()[0].offsetWidth;
}
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
window.scrollTo(0, $target[0].getBoundingClientRect().top + getPageScrollTop() + 1);
});
function getPageScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
</script>

html 構造:

2. スクロールナビゲーションの実装

タブ コンポーネントでは、現在アクティブなタブ項目に対応するタブ コンテンツのみが表示されます。その要件は、ナビゲーションされるすべてのコンテンツです。

1) ナビゲーション項目をクリックすると、ページのスクロールを制御し、クリックされたナビゲーション項目に対応するコンテンツが自動的に上部に表示され、スティッキー要素のすぐ下に表示されます。

2) ページがスクロールすると、現在表示されているナビゲーション コンテンツに基づいて、アクティブなスタイルが対応するナビゲーション項目に自動的に追加されます。

複雑そうに見えますが、デモでの実装は比較的簡単です。

<script>
var $sticky = $('#sticky');
var $target = $('#target');
new Sticky($sticky, {
unStickyDistance: 60,
target: $target,
wait: 1,
isFixedWidth: false,
getStickyWidth: function ($elem) {
return $elem.parent()[0].offsetWidth;
}
});
var offsetTop = 60;
//实现点击tab项自动滚动到导航内容的效果
$sticky.on('click', 'a', function (e) {
e.preventDefault();
var $this = $(e.currentTarget);
var $parent = $this.parent();
if($parent.hasClass('active')) return;
$sticky.find('li.active').removeClass('active');
$parent.addClass('active');
var target = $this.data('target') || $this.attr('href');
var $target = $(target);
window.scrollTo(0, Math.floor($target[0].getBoundingClientRect().top) + getPageScrollTop() - offsetTop);
});
/**
* Math.floor是解决rect.top或rect.bottom带小数问题
*/
//实现滚动时根据当前显示的导航内容自动给相应的导航项添加active样式
$(window).scroll(throttle(function(){
var $curItem = $sticky.find('a').filter('[href=' + getCurTarget() + ']');
var $parent = $curItem.parent();
if($parent.hasClass('active')) return;
//最后的blur是为了去掉:active及:focus伪类的样式
$sticky.find('li.active').removeClass('active').find('a').trigger('blur');
$parent.addClass('active');
},1));
//获取当前显示的导航内容元素的id
function getCurTarget() {
for(var targets = ['#First', '#Second', '#Third'], i = 0, l = targets.length; i < l; i++) {
var curRect = $(targets[i])[0].getBoundingClientRect();
if(Math.floor(curRect.top) <= offsetTop && Math.floor(curRect.bottom) > offsetTop) {
return targets[i];
}
}
return targets[0];
}
function getPageScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
//这个函数在实际工作中是应该抽出来的，否则sticky.js里面还有一份重复的
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
</script>

html 構造:

3. 概要

この記事では、スティッキー コンポーネントを組み合わせて、IE9+、Firefox、Chrome と互換性のある 2 つのナビゲーション効果の実装を提供します。興味がある場合は、ソース コードをダウンロードして詳細を確認してください。タブ ナビゲーションを実装する場合、bs タブ コンポーネントにより実装が非常に簡単になります。結局のところ、新しいコンポーネントを形成するためにスティッキー コンポーネントとタブ コンポーネントをカプセル化する必要はありません。スクロール ナビゲーションを実装する場合、タブ コンポーネントは使用されないため、実際の状況では、これら 2 つの機能を 2 つの独立したコンポーネントまたは 1 つのコンポーネントにカプセル化できます。ただし、この 2 つのコンポーネントの記述方法については、この記事の主な内容ではないため、詳しくは紹介しません。実際にはこれを実行したいと思います。このブログではこれら 2 つのコンポーネントを紹介します。単純なもののためにホイールを作成しないのは機会の無駄です。これら 2 つの効果を達成すると、次の 2 つの利点もあります:

1) Firefox および IE では、まず Web ページを更新してから、Web ページが更新された位置に表示されますが、スクロール関連のコンポーネントを作成すると、スクロール イベントはトリガーされません。将来的には、コンポーネントが初期化されるときに主導権を握る必要があります。

2) getBoundingClientRect によって返される rect オブジェクトに関連する値は、IE および Firefox では 60.2222299999 などの 10 進数になる可能性があり、そのような数値は、判断を行うときに予期される状況と一致しない可能性があり、予期しないバグが発生する可能性があります。特に厳密でない場合は、Math.floor を使用してこれらの値を四捨五入して計算や判定に使用できます。たとえば、スクロール ナビゲーションの実装では、rect.top の値は 60.2222299999、offsetTop の値は 60 です。 curRect.top