https://thecleverest.com/wp-content/themes/default/custom.js?ver=1

1document.addEventListener("DOMContentLoaded", function() {
2	// Please write some vanilla js that wraps groups of child elements in a parent element. Each group of child elements will always start with an element with class "wrap-sticky-start" and end with an element with class "wrap-sticky-end".
3	function wrapElements() {
4	    var startElements = document.getElementsByClassName('wrap-sticky-start');
5	    var endElements = document.getElementsByClassName('wrap-sticky-end');
6
7	    for (var i = 0; i < startElements.length; i++) {
8	        var wrapper = document.createElement('div');
9	        wrapper.classList.add('sticky'); // Add the "sticky" class to the wrapper
10	        var startElement = startElements[i];
11	        var endElement = endElements[i];
12	        var parentElement = startElement.parentNode;
13	        var sibling = startElement.nextSibling;
14	        var elementsToWrap = [];
15
16	        // Add the height of the start element as a data attribute
17	        // calculate the amount to shift it up
18	        var windowHeight = window.innerHeight;
19	        var halfwayPoint = windowHeight/2;
20	        //var halfOfElementHeight = startElement.offsetHeight / 2
21	        var halfOfElementHeight = startElement.querySelector("img").clientHeight / 2 // just look at the image, not the parent with its weird padding
22	        //var startElementHeight = window.getComputedStyle(startElement, null).getPropertyValue("height");
23	        var startOfTopToMakeItCentered = halfwayPoint - halfOfElementHeight;
24	        if (startOfTopToMakeItCentered < 0) {
25	        	startOfTopToMakeItCentered = 0;
26	        }
27
28	        //debugger;
29            //startElement.setAttribute('data-height', startOfTopToMakeItCentered);
30	        // position it
31            startElement.style.top = `${startOfTopToMakeItCentered}px`;
32
33	        while (sibling && sibling !== endElement) {
34	            elementsToWrap.push(sibling);
35	            sibling = sibling.nextSibling;
36	        }
37
38	        parentElement.insertBefore(wrapper, startElement);
39	        wrapper.appendChild(startElement);
40	        wrapper.appendChild(endElement);
41
42	        for (var j = 0; j < elementsToWrap.length; j++) {
43	            wrapper.insertBefore(elementsToWrap[j], endElement);
44	        }
45	    }
46	}
47
48	function debounce(func, wait) {
49        let timeout;
50        return function() {
51            const context = this, args = arguments;
52            const later = function() {
53                timeout = null;
54                func.apply(context, args);
55            };
56            clearTimeout(timeout);
57            timeout = setTimeout(later, wait);
58        };
59    }
60
61    //wrapElements(); // Initial call
62
63    // Call wrapElements on window resize, but debounce it
64    //window.addEventListener('resize', debounce(wrapElements, 200));
65
66	
67	//setTimeout(() => {  wrapElements(); }, 2000);
68	//wrapElements();
69});