Bagaimana untuk melaksanakan komponen melekit mudah menggunakan kemahiran getBoundingClientRect method_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. Artikel ini memperkenalkan idea pelaksanaan komponen ini, dan menyediakan pelaksanaan khusus yang menyokong penetapan elemen melekit di bahagian atas atau bawah Memandangkan komponen ini sangat biasa dalam laman web, adalah perlu untuk menguasai kaedah pelaksanaannya supaya ia boleh digunakan apabila diperlukan Pada masa itu, komponen dengan lebih banyak fungsi akan ditulis berdasarkan ideanya.

Kesan demo ditetapkan di bahagian atas (bersamaan dengan sticky-top.html):

Kesan demo ditetapkan di bahagian bawah (bersamaan dengan sticky-bottom.html):

1. Idea pelaksanaan

Kunci untuk melaksanakan komponen ini adalah untuk mencari titik kritikal apabila elemen ditetapkan dan apabila ia tidak ditetapkan untuk mencari titik kritikal ini, kita mesti melihat secara terperinci proses perubahan demo sebelumnya. Dalam demo sebelum ini, terdapat elemen bar navigasi, iaitu elemen yang ingin kita kawal sama ada ia tetap atau tidak, terdapat juga elemen yang digunakan untuk memaparkan kandungan senarai halaman web. Elemen senarai ini diikuti oleh Elemen melekit berkaitan secara fungsi, kerana elemen melekit menavigasi kandungan yang disediakan oleh elemen senarai ini Apabila artikel ini mula memperkenalkan fungsi komponen melekit, dikatakan bahawa penetapan komponen melekit berlaku apabila halaman web menatal ke kawasan tertentu Apabila anda meninggalkan kawasan ini, kawasan tatal atau julat tatal ini ditentukan oleh elemen senarai, jadi elemen senarai ini adalah kunci untuk mencari titik kritikal. . Ia mewakili julat tatal halaman web di mana komponen melekit boleh dibetulkan untuk kemudahan rujukan nanti, saya memanggil elemen ini sebagai elemen sasaran. Mari kita lihat secara terperinci proses perubahan demo sebelumnya Memandangkan idea pelaksanaan pembetulan di bahagian bawah dan pembetulan di bahagian atas adalah sama, jika anda memahami prinsip pelaksanaan penetapan di bahagian atas, saya percaya anda juga akan menjadi. dapat memahami penetapan di bahagian atas Prinsip pelaksanaan bahagian bawah, jadi untuk mengurangkan panjang dan meningkatkan kecekapan, di sini kami hanya memperkenalkan situasi membetulkannya di bahagian atas:

Status awal elemen melekit dan elemen sasaran adalah seperti berikut:

Apabila bar skrol perlahan-lahan bergerak ke bawah, menyebabkan halaman web menatal ke atas, status elemen melekit dan elemen sasaran tidak berubah dalam jarak skrol tertentu sehingga keadaan ini (jarak skrol bar skrol ialah 573px ):

Dalam keadaan ini, selagi bar skrol ditatal ke bawah 1px, elemen melekit akan ditetapkan di bahagian atas (jarak skrol bar skrol ialah 574px):

Maksudnya, apabila jarak antara bahagian atas elemen sasaran dan bahagian atas penyemak imbas adalah kurang daripada 0 (apabila bahagian atas elemen sasaran tidak melebihi bahagian atas penyemak imbas, jarak itu dianggap sebagai lebih besar daripada 0), elemen melekit akan diperbaiki, jadi ini Ini adalah titik kritikal pertama yang kami cari. Kemudian bar skrol terus menatal ke bawah Selagi elemen sasaran masih dalam kawasan yang boleh dilihat oleh penyemak imbas, elemen melekit akan kekal:

Sehingga keadaan ini (jarak skrol bar skrol ialah 1861px):

Dalam keadaan ini, selagi bar skrol ditatal ke bawah 1px, elemen melekit akan tidak ditetapkan di bahagian atas (jarak skrol bar skrol ialah 1862px):

Jelas sekali, ini ialah titik kritikal kedua yang kami cari, tetapi syarat penghakimannya ialah: apabila jarak antara bahagian bawah elemen sasaran dan bahagian atas penyemak imbas kurang daripada ketinggian elemen melekit, titik melekit elemen tidak akan tetap. Sebab mengapa ketinggian di sini kurang daripada ketinggian elemen melekit dan bukannya kurang daripada 0 adalah kerana untuk komponen yang dibangunkan berdasarkan titik kritikal kurang daripada 0, elemen sasaran akan hampir hilang dari kawasan yang boleh dilihat pelayar, tetapi melekit elemen masih tetap di sana. Kesan:

melekit juga merangkumi kandungan pengaki Ia pada asalnya bertujuan untuk memudahkan operasi pengguna, tetapi akhirnya menjejaskan operasi pengguna Oleh itu, titik kritikal untuk menyahbaikan mesti didepankan, dan ketinggian elemen melekit adalah yang paling sesuai .

Melalui pembongkaran proses perubahan demo sebelum ini, kami telah memperoleh dua titik kritikal perubahan keadaan melekit apabila bar skrol menatal ke bawah:

1) Apabila jarak antara bahagian atas elemen sasaran dan bahagian atas penyemak imbas kurang daripada 0, elemen melekit akan dibetulkan;

var target = document.getElementById('main-container');
var rect = target.getBoundingClientRect();
console.log(rect);

rect.top < 0 && (rect.bottom - stickyHeight) > 0;

var docClientWidth = document.documentElement.clientHeight;
rect.bottom > docClientWidth && (rect.top + stickyHeight) < docClientWidth;

<div class="container-fluid sticky-wrapper">
<ul id="sticky" data-target="#main-container" class="sticky nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div id="main-container" class="container-fluid">
<div class="row">
...
</div>
...
</div>

<div id="main-container" class="container-fluid">
<div class="row">
...
</div>
...
</div>
<div class="container-fluid sticky-wrapper">
<ul id="sticky" data-target="#main-container" class="sticky nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>

.sticky-wrapper {
margin-bottom: 10px;
height: 52px;
}

.sticky--in-top,.sticky--in-bottom {
position: fixed;
z-index: 1000;
}
.sticky--in-top {
top: 0;
}
.sticky--in-bottom {
bottom: 0;
}

$(window).scroll(function() {
var rect = $target[0].getBoundingClientRect();
if (rect.top < 0 && (rect.bottom - stickyHeight) > 0) {
!$elem.hasClass('sticky--in-top') && $elem.addClass('sticky--in-top').css('width', stickyWidth + 'px');
} else {
$elem.hasClass('sticky--in-top') && $elem.removeClass('sticky--in-top').css('width', 'auto');
}
});

$(window).scroll(function() {
var rect = $target[0].getBoundingClientRect(),
docClientWidth = document.documentElement.clientHeight; 
if (rect.bottom > docClientWidth && (rect.top + stickyHeight) < docClientWidth) {
!$elem.hasClass('sticky--in-bottom') && $elem.addClass('sticky--in-bottom').css('width', stickyWidth + 'px');
} else {
$elem.hasClass('sticky--in-bottom') && $elem.removeClass('sticky--in-bottom').css('width', 'auto');
}
});

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);
}
}

$(window).scroll(throttle(function() {
var rect = $target[0].getBoundingClientRect(),
docClientWidth = document.documentElement.clientHeight; 
if (rect.bottom > docClientWidth && (rect.top + stickyHeight) < docClientWidth) {
!$elem.hasClass('sticky--in-bottom') && $elem.addClass('sticky--in-bottom').css('width', stickyWidth + 'px');
} else {
$elem.hasClass('sticky--in-bottom') && $elem.removeClass('sticky--in-bottom').css('width', 'auto');
}
}, 50);

/**
* @param elem: jquery选择器，用来获取要被固定的元素
* @param opts:
* - target: jquery选择器，用来获取表示固定范围的元素
* - type: top|bottom，表示要固定的位置
* - height: 要固定的元素的高度，由于高度在做页面时就是确定的并且几乎不会被DOM操作改变，直接从外部传入可以除去获取元素高度的操作
* - wait: 滚动事件回调的节流时间，控制回调至少隔多长时间才执行一次
* - getStickyWidth：获取要固定元素的宽度，window resize或者DOM操作会导致固定元素的宽度发生变化，需要这个回调来刷新stickyWidth
*/
var Sticky = function (elem, opts) {
var $elem = $(elem), $target = $(opts.target || $elem.data('target'));
if (!$elem.length || !$target.length) return;
var stickyWidth, $win = $(window),
stickyHeight = opts.height || $elem[0].offsetHeight,
rules = {
top: function (rect) {
return rect.top < 0 && (rect.bottom - stickyHeight) > 0;
},
bottom: function (rect) {
var docClientWidth = document.documentElement.clientHeight;
return rect.bottom > docClientWidth && (rect.top + stickyHeight) < docClientWidth;
}
},
type = (opts.type in rules) && opts.type || 'top',
className = 'sticky--in-' + type;
refreshStickyWidth();
$win.scroll(throttle(sticky, $.isNumeric(opts.wait) && parseInt(opts.wait) || 100));
$win.resize(throttle(function () {
refreshStickyWidth();
sticky();
}, 50));
function refreshStickyWidth() {
stickyWidth = typeof opts.getStickyWidth === 'function' && opts.getStickyWidth($elem) || $elem[0].offsetWidth;
$elem.hasClass(className) && $elem.css('width', stickyWidth + 'px');
}
//效果实现
function sticky() {
if (rules[type]($target[0].getBoundingClientRect())) {
!$elem.hasClass(className) && $elem.addClass(className).css('width', stickyWidth + 'px');
} else {
$elem.hasClass(className) && $elem.removeClass(className).css('width', 'auto');
}
}
//函数节流
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>
new Sticky('#sticky',{
height: 52,
getStickyWidth: function($elem){
return ($elem.parent()[0].offsetWidth - 30);
}
});
</script>

<script>
new Sticky('#sticky',{
height: 52,
type: 'bottom',
getStickyWidth: function($elem){
return ($elem.parent()[0].offsetWidth - 30);
}
});
</script>