Hide small right/left block once they're scrolled out of view

Web/Presenters/templates/Group/View.xml

@@ -261,3 +261,7 @@
 </div>
 
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/Presenters/templates/User/View.xml

@@ -711,3 +711,7 @@
         {include "banned.xml"}
     {/if}
 {/block}
+
+{block bodyScripts}
+    {script "js/al_despacito_wall.js"}
+{/block}

Web/Presenters/templates/components/comments.xml

@@ -1,6 +1,6 @@
 <h4 n:if="$showTitle ?? true">{_comments} ({$count})</h4>
 
-<div n:ifset="$thisUser">
+<div n:ifset="$thisUser" id="standaloneCommentBox">
     {var $commentsURL = "/al_comments/create/$model/" . $parent->getId()}
     {var $club = $parent instanceof \openvk\Web\Models\Entities\Post && $parent->getTargetWall() < 0 ? (new openvk\Web\Models\Repositories\Clubs)->get(abs($parent->getTargetWall())) : $club}
     {if !$readOnly}

Web/static/css/main.css

@@ -2300,3 +2300,20 @@ a.poll-retract-vote {
     background-image: url(/assets/packages/static/openvk/img/videoico.png);
     display: none;
 }
+
+#standaloneCommentBox {
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    border-bottom: 1px dotted #8b8b8b;
+    z-index: 10;
+}
+
+.page_content.overscrolled div[class$="_small_block"] {
+    position: absolute;
+    visibility: hidden;
+}
+
+.page_content.overscrolled div[class$="_big_block"] {
+    width: unset;
+}

Web/static/js/al_despacito_wall.js

@@ -0,0 +1,27 @@
+const contentPage = document.querySelector(".page_content");
+const rootElement = document.documentElement;
+
+let smallBlockObserver = new IntersectionObserver(entries => {
+    entries.forEach(x => {
+        window.requestAnimationFrame(() => {
+            let pastHeight = contentPage.getBoundingClientRect().height;
+            if(x.isIntersecting)
+                contentPage.classList.remove("overscrolled");
+            else
+                contentPage.classList.add("overscrolled");
+
+            let currentHeight = contentPage.getBoundingClientRect().height;
+            let ratio         = currentHeight / pastHeight;
+
+            rootElement.scrollTop *= ratio;
+        }, contentPage);
+    });
+}, {
+    root: null, // screen
+    rootMargin: "0px",
+    threshold: 0
+});
+
+let smol = document.querySelector('div[class$="_small_block"]');
+if(smol != null)
+    smallBlockObserver.observe(smol);