So implementieren Sie eine einfache Sticky-Komponente mithilfe der getBoundingClientRect-Methode_javascript-Fähigkeiten

Sticky-Komponenten werden normalerweise in Navigationsleisten oder Symbolleisten verwendet. Wenn die Webseite in einem bestimmten Bereich scrollt, werden Elemente wie die Navigationsleiste oder Symbolleiste oben oder unten auf der Seite fixiert, um Benutzern die schnelle Ausführung der Funktionen zu erleichtern die von solchen Elementen bereitgestellt werden. In diesem Artikel wird die Implementierungsidee dieser Komponente vorgestellt und eine spezifische Implementierung bereitgestellt, die das Fixieren von Sticky-Elementen oben oder unten unterstützt. Da diese Komponente auf Websites sehr häufig vorkommt, ist es erforderlich, ihre Implementierungsmethode zu beherrschen Bei Bedarf werden dann Komponenten mit mehr Funktionen geschrieben, die auf seinen Ideen basieren.

Demo-Effekt oben behoben (entsprechend sticky-top.html):

Demo-Effekt unten behoben (entsprechend sticky-bottom.html):

1. Umsetzungsideen

Der Schlüssel zur Implementierung dieser Komponente besteht darin, den kritischen Punkt zu finden, wann ein Element behoben ist und wann es nicht repariert ist. Um diesen kritischen Punkt zu finden, müssen wir uns zunächst den Änderungsprozess der vorherigen Demo genauer ansehen. In der vorherigen Demo gibt es ein Navigationsleistenelement, das wir steuern möchten, ob es fixiert ist oder nicht. Es gibt auch ein Element, das zum Anzeigen eines Listeninhalts verwendet wird Auf dieses Listenelement folgt das Sticky-Element, da das Sticky-Element genau durch den von diesem Listenelement bereitgestellten Inhalt navigiert Die Sticky-Komponente tritt auf, wenn die Webseite zu einem bestimmten Bereich scrollt. Dieser Scrollbereich oder Scrollbereich wird durch das Listenelement bestimmt, sodass dieses Listenelement der Schlüssel zum Finden des kritischen Punkts ist . Es stellt den Scrollbereich der Webseite dar, in dem die Sticky-Komponente fixiert werden kann. Der Einfachheit halber nenne ich dieses Element später das Zielelement. Werfen wir einen detaillierten Blick auf den Änderungsprozess der vorherigen Demo. Da die Implementierungsideen der Fixierung unten und der Fixierung oben identisch sind, glaube ich, dass Sie dies auch tun werden, wenn Sie das Implementierungsprinzip der Fixierung oben verstehen Um die Länge zu reduzieren und die Effizienz zu verbessern, stellen wir hier nur die Situation der Befestigung oben vor:

Der Anfangsstatus des Sticky-Elements und des Zielelements ist wie folgt:

Wenn sich die Bildlaufleiste langsam nach unten bewegt und die Webseite nach oben scrollt, ändert sich der Status des Sticky-Elements und des Zielelements innerhalb eines bestimmten Bildlaufabstands bis zu diesem Zustand nicht (der Bildlaufabstand der Bildlaufleiste beträgt 573 Pixel). ):

In diesem Zustand bleibt das Sticky-Element oben fixiert, solange die Bildlaufleiste um 1 Pixel nach unten gescrollt wird (der Bildlaufabstand der Bildlaufleiste beträgt 574 Pixel):

Das heißt, wenn der Abstand zwischen der Oberseite des Zielelements und der Oberseite des Browsers kleiner als 0 ist (wenn die Oberseite des Zielelements die Oberseite des Browsers nicht überschreitet, wird der Abstand als betrachtet größer als 0), wird das klebrige Element fixiert, daher ist dies der erste kritische Punkt, nach dem wir suchen. Anschließend scrollt die Bildlaufleiste weiter nach unten. Solange sich das Zielelement noch im sichtbaren Bereich des Browsers befindet, bleibt das Sticky-Element fixiert:

Bis zu diesem Zustand (der Bildlaufabstand der Bildlaufleiste beträgt 1861 Pixel):

Solange in diesem Zustand die Bildlaufleiste um 1 Pixel nach unten gescrollt wird, wird das Sticky-Element oben nicht fixiert (der Bildlaufabstand der Bildlaufleiste beträgt 1862 Pixel):

Natürlich ist dies der zweite kritische Punkt, nach dem wir suchen, aber seine Beurteilungsbedingung lautet: Wenn der Abstand zwischen der Unterseite des Zielelements und der Oberseite des Browsers geringer ist als die Höhe des Sticky-Elements, wird der Sticky angezeigt Element wird unfixiert. Der Grund dafür, dass die Höhe hier kleiner als die Höhe des Sticky-Elements und nicht kleiner als 0 ist, liegt darin, dass bei Komponenten, die auf der Grundlage des kritischen Punkts von weniger als 0 entwickelt wurden, das Zielelement fast aus dem sichtbaren Bereich des Browsers verschwindet, das Sticky jedoch Element ist dort immer noch behoben. Wirkung:

Sticky deckt auch den Inhalt der Fußzeile ab. Es war ursprünglich dazu gedacht, die Benutzeroperationen zu erleichtern, aber es hat letztendlich Auswirkungen auf die Benutzeroperationen. Daher muss der kritische Punkt der Aufhebung vorgezogen werden, und die Höhe des Sticky-Elements ist am besten geeignet .

Durch die vorherige Demontage des Demo-Änderungsprozesses haben wir zwei kritische Punkte für Sticky-State-Änderungen erhalten, wenn die Bildlaufleiste ganz nach unten scrollt:

1) Wenn der Abstand zwischen der Oberseite des Zielelements und der Oberseite des Browsers weniger als 0 beträgt, wird das Sticky-Element fixiert

2) Wenn der Abstand zwischen der Unterseite des Zielelements und der Oberseite des Browsers geringer ist als die Höhe des Sticky-Elements, wird die Fixierung des Sticky-Elements aufgehoben.

Basierend auf diesen beiden kritischen Punkten kann der Schluss gezogen werden, dass beim Scrollen der Bildlaufleiste nach unten die Beurteilungsbedingung für den festen Bildlaufbereich des Sticky-Elements lautet: der Abstand zwischen der Oberseite des Zielelements und der Oberseite des Der Browser ist kleiner als 0 und der untere Rand des Zielelements ist Der Abstand vom oberen Rand des Browsers ist größer als die Höhe des Sticky-Elements. Und diese Beurteilungsbedingung gilt auch für die Situation, in der die Bildlaufleiste nach oben scrollt, denn wenn die Bildlaufleiste weiter nach oben scrollt, ist der kritische Punkt der Sticky-State-Änderung:

1) Wenn der Abstand zwischen der Unterseite des Zielelements und der Oberseite des Browsers größer ist als die Höhe des Sticky-Elements, wird das Sticky-Element fixiert

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>