Update top vs. bottom sticky styles separately

If a sublist changes from sticky top to sticky bottom in a single run of the
logic (without passing through the default state), we were leaving the previous
top position set. This handles them independently to resolve this.

Fixes element-hq/element-web#14390
Maybe helps with element-hq/element-web#14443
For element-hq/element-web#13635

Author: jryans

src/components/structures/LeftPanel2.tsx

@@ -187,10 +187,23 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 if (header.style.top !== newTop) {
                     header.style.top = newTop;
                 }
-            } else if (style.stickyBottom) {
+            } else {
+                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
+                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
+                }
+                if (header.style.top) {
+                    header.style.removeProperty('top');
+                }
+            }
+
+            if (style.stickyBottom) {
                 if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
                     header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
                 }
+            } else {
+                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
+                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
+                }
             }
 
             if (style.stickyTop || style.stickyBottom) {
@@ -209,21 +222,12 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
                     header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
                 }
-                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
-                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
-                }
-                if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
-                    header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
-                }
                 if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
                     headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
                 }
                 if (header.style.width) {
                     header.style.removeProperty('width');
                 }
-                if (header.style.top) {
-                    header.style.removeProperty('top');
-                }
             }
         }