Kann ich die Sticky-Sidebar von Theia ohne JQuery verwenden? ⇐ JavaScript

[Anonymous]

Theia Sticky Sidebar funktioniert nicht ohne jQuery – CDN stellt rohes JS (v2) bereit, aber mein Code erwartet jQuery v1 – wie kann ich migrieren oder reparieren?
Ich versuche, Theia Sticky Sidebar auf einer Website zu verwenden, auf der ich jQuery durch rohes Javascript ersetzt habe. Ich habe festgestellt, dass es zwei wichtige Realitäten gibt, die mich verwirrt haben: Das alte Plugin (v1.x) ist ein jQuery-Plugin, das jQuery und $.fn.theiaStickySidebar erwartet. CDN-Hosts und neuere Versionen (v2.x+) stellen eine einfache JS-Klasse (TheiaStickySidebar) als ES-Modul oder UMD-Build bereit. Ich habe mehrere Ansätze ausprobiert und bin nicht weitergekommen – die Seitenleiste bleibt nie hängen, wenn ich versuche, die alte API im jQuery-Stil mit MicroJS zu verwenden. Unten ist ein minimal reproduzierbares Beispiel dessen, was ich versucht habe, und die genauen Schritte.

Code: Select all

.main { display:flex; max-width:1000px; margin:0 auto; }
.content { flex:1; min-height:1500px; padding:20px; background:#fff; }
.sidebar { width:300px; padding:20px; background:#eee; }
.theiaStickySidebar:after { content:""; display:table; clear:both; }





Main content...


Sidebar widgets...




document.addEventListener('DOMContentLoaded', function(){
new TheiaStickySidebar({
elements: '.content, .sidebar',
additionalMarginTop: 30
});
});

Diese funktionieren überhaupt nicht, aber in der CDN-Dokumentation heißt es, dass es ohne jquery funktionieren wird: https://www.jsdelivr.com/package/npm/th ... ky-sidebar
Aber wenn ich v1 verwende, funktioniert es perfekt.
`

Code: Select all

jQuery(document).ready(function($) {
$('.sidebar').theiaStickySidebar({
'containerSelector': '.main-content-wrapper',
'additionalMarginTop': 30,
'additionalMarginBottom': 20,viewport
'minWidth': 901,
'disableOnResponsiveLayouts': true
});
});
`

Das funktioniert perfekt. Wo liegt also eigentlich das Problem? Ich verstehe überhaupt nichts. Ich möchte JQuery überhaupt nicht verwenden. Was ist die beste, minimale und produktionssichere Lösung, um das Verhalten der Theia Sticky Sidebar zum Laufen zu bringen, ohne jQuery zu laden und mit den wenigsten Codeänderungen?