Cara menggunakan komponen Sticky untuk melaksanakan navigasi tab dan navigasi tatal dengan kemahiran sticky effect_javascript

Komponen melekit biasanya digunakan dalam bar navigasi atau bar alat Apabila halaman web menatal di kawasan tertentu, elemen seperti bar navigasi atau bar alat ditetapkan di bahagian atas atau bawah halaman untuk memudahkan pengguna melaksanakan fungsi dengan pantas. disediakan oleh elemen tersebut beroperasi.

Dalam artikel ini Pelaksanaan komponen Sticky yang dipertingkatkan menyediakan versi komponen melekit yang dipertingkat dan menggunakan kesan demonstrasi pada blognya. Dengan komponen mudah seperti melekit, kami boleh menggunakannya untuk membangunkan kesan yang lebih kaya, seperti navigasi tab dan navigasi tatal untuk diperkenalkan dalam artikel ini. Pelaksanaannya mudah dan kesan demonstrasi adalah seperti berikut:

navigasi tab (bersamaan dengan tab-sticky.html):

Navigasi tatal (sepadan dengan nav-scroll-sticky.html):

1. Pelaksanaan navigasi tab

Keperluan untuk navigasi tab ialah: apabila mengklik item navigasi, selain menukar kandungan tab, anda juga mesti mengawal penatalan, meletakkan kandungan tab untuk dipaparkan di atas dan memaparkannya betul-betul di bawah elemen melekit. Memandangkan demo dibuat dengan bootstrap, komponen tab yang disediakan oleh bootstrap adalah sangat mudah dan mudah untuk digunakan Kami boleh melakukan pemprosesan kawalan tatal dalam panggilan balik acara yang disediakan oleh komponen tab, jadi kesan ini agak mudah. untuk melaksanakan:

<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>

struktur html:

2. Pelaksanaan navigasi tatal

Navigasi menatal agak menyusahkan Dalam komponen tab, hanya kandungan tab yang sepadan dengan item tab yang sedang diaktifkan akan dipaparkan dalam navigasi menatal, semua kandungan yang akan dilayari telah dipaparkan pada halaman tersebut.

1) Apabila mengklik item navigasi, kawal penatalan halaman dan secara automatik memaparkan kandungan yang sepadan dengan item navigasi yang diklik di atas, dan ia harus dipaparkan betul-betul di bawah elemen melekit

2) Apabila halaman menatal, gaya aktif ditambah secara automatik pada item navigasi yang sepadan berdasarkan kandungan navigasi yang sedang dipaparkan.

Walaupun kedengarannya rumit, pelaksanaan dalam demo agak mudah:

<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>

struktur html:

3. Ringkasan

Artikel ini menggabungkan komponen melekit untuk menyediakan dua pelaksanaan kesan navigasi, yang serasi dengan IE9+, firefox dan chrome Jika anda berminat, anda boleh memuat turun kod sumber dan mengetahui lebih lanjut mengenainya. Apabila melaksanakan navigasi tab, ia sangat mudah untuk dilaksanakan kerana komponen tab bs tidak perlu merangkum komponen melekat dan tab untuk membentuk komponen baru. Apabila melaksanakan navigasi menatal, kerana komponen tab tidak digunakan, dua titik permintaan navigasi menatal dilaksanakan secara berasingan Dalam situasi sebenar, kedua-dua fungsi ini boleh dirangkumkan kepada dua komponen bebas atau satu komponen ditulis semudah navigasi tab Walau bagaimanapun, artikel ini tidak memperkenalkan kaedah penulisan kedua-dua komponen ini secara mendalam, kerana ini bukan kandungan utama artikel ini masa depan. Blog ini akan memperkenalkan kedua-dua komponen ini adalah satu pembaziran peluang untuk tidak membina roda untuk perkara yang mudah. Apabila mencapai dua kesan ini, terdapat juga dua keuntungan:

1) Firefox dan IE, biarkan halaman web dahulu dan kemudian muat semulanya Walaupun halaman web masih akan dipaparkan pada kedudukan yang dimuat semula, acara tatal tidak akan dicetuskan oleh itu, jika anda memasukkan komponen berkaitan tatal pada masa hadapan, anda mesti mengambil inisiatif apabila komponen dimulakan Panggilan balik berkaitan tatal;

2) Nilai yang berkaitan dengan objek tepat yang dikembalikan oleh getBoundingClientRect mungkin nombor perpuluhan di bawah IE dan Firefox, seperti 60.2222299999 Nombor sedemikian mungkin tidak konsisten dengan situasi yang dijangkakan semasa membuat pertimbangan, yang membawa kepada beberapa BUG yang tidak dijangka. Jika anda tidak begitu tegas, anda boleh menggunakan Math.floor untuk membulatkan nilai ini dan kemudian menggunakannya untuk pengiraan atau penghakiman. Sebagai contoh, dalam pelaksanaan navigasi tatal, nilai rect.top ialah 60.2222299999 dan nilai offsetTop ialah 60. Keadaan curRect.top <= offsetTop dijangka boleh diwujudkan, tetapi ia tidak ditetapkan kerana perpuluhan.