jquery implementiert die div-Ebene, um beim Scrollen der Seite zu scrollen

Beim Durchsuchen von ipc.me habe ich das Gefühl, dass der Schieberegler auf der rechten Seite immer unter dem Rand des Fensters schwebt. Basierend auf einem Artikel in Zhang Xinxus Blog Eine solche Funktion wurde erfolgreich implementiert. Der Code lautet wie folgt (basierend auf JQuery implementiert, daher muss die JQuery-Datei im Voraus in die Seite importiert werden):

<script type="text/javascript">
$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });    
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
            }else {
                element.css({
                    position: "absolute",
                    top: top
                });    
            }
        });
    };
    return $(this).each(function() {
        position($(this));                         
    });
};
$("要浮动的层id或class").smartFloat();
</script>

Natürlich ist es unter Chrome und IE Ich habe es nicht getestet, daher sollte es wie folgt funktionieren (am besten werfen Sie einen Blick darauf, verstehen Sie das Prinzip, betrachten Sie das Problem aus der Höhe und sehen Sie die Berge auf einen Blick):

Der Standardstatus ist der Standardstatus, es gibt nichts zu tun, egal ob die Positionierung absolut oder statisch ist, alles ist in Ordnung. Der Schlüssel liegt darin, dass, wenn der Browser einen Bildlauf durchführt und das Objekt (die schwebende Ebene) aus dem Ansichtsfenster der Browseroberfläche entfernt werden muss, einfach sein Positionsattribut geändert werden muss, sodass es schwebt und am oberen Rand des Fensters angezeigt wird. Das beste Positionsattribut ist fest, was die Positionierung schwebender Ebenen in IE6 und anderen Browsern glätten und fixieren kann. Da IE6-Vorgänger das feste Attribut nicht unterstützen, gehen Sie einen Schritt zurück und verwenden Sie stattdessen das absolute Attribut, aber es wird Nebenwirkungen geben - Das Scrollen wird nicht reibungslos sein. Allerdings können wir nichts dagegen tun.

Der Schlüssel liegt nun darin, festzustellen, ob die aktuelle Ebene Kontakt mit dem oberen Rand des Browserfensters hat. Wenn die schwebende Ebene den oberen Rand des Browserfensters berührt, entspricht der vertikale Versatzwert der Seite tatsächlich der Bildlaufhöhe der Seite. Daher ist es in Ordnung, dies zur Beurteilung zu verwenden. Wie erhalte ich den Abstand zwischen den Elementen auf der Seite und wie sieht es mit dem vertikalen Abstand aus? Es ist immer noch schwierig, diesen Wert mit reinem JS-Code zu erhalten. Glücklicherweise hilft uns die JavaScript-Bibliothek jQuery bei der Lösung dieser Aufgaben.