also blur the sticky headers

added a DOM element so we can set the background on the parent and
the blur on the new element

res/css/views/rooms/_RoomSublist2.scss

@@ -80,6 +80,14 @@ limitations under the License.
             // We don't have a top style because the top is dependent on the room list header's
             // height, and is therefore calculated in JS.
             // The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
+
+            // blur for element theme, background image is on parent
+            .mx_RoomSublist2_stickyHeaderBlur {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
         }
 
         // Sticky Headers End

res/themes/element/css/_mods.scss

@@ -19,4 +19,18 @@
     .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
         backdrop-filter: blur(175px);
     }
+
+    // sticky headers need their own blur
+
+    .mx_RoomSublist2_headerContainer_sticky {
+        background-size: cover;
+        background-image: var(--avatar-url);
+        background-position: center;
+    }
+
+    .mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
+        backdrop-filter: blur(100px);
+        background-color: $roomlist2-bg-color;
+    }
+}
 }

src/components/views/rooms/RoomSublist2.tsx

@@ -311,20 +311,22 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
-                                <AccessibleButton
+                                <div className="mx_RoomSublist2_stickyHeaderBlur">
-                                    inputRef={ref}
+                                    <AccessibleButton
-                                    tabIndex={tabIndex}
+                                        inputRef={ref}
-                                    className={"mx_RoomSublist2_headerText"}
+                                        tabIndex={tabIndex}
-                                    role="treeitem"
+                                        className={"mx_RoomSublist2_headerText"}
-                                    aria-level={1}
+                                        role="treeitem"
-                                    onClick={this.onHeaderClick}
+                                        aria-level={1}
-                                >
+                                        onClick={this.onHeaderClick}
-                                    <span className={collapseClasses} />
+                                    >
-                                    <span>{this.props.label}</span>
+                                        <span className={collapseClasses} />
-                                </AccessibleButton>
+                                        <span>{this.props.label}</span>
-                                {this.renderMenu()}
+                                    </AccessibleButton>
-                                {this.props.isMinimized ? null : badgeContainer}
+                                    {this.renderMenu()}
-                                {this.props.isMinimized ? null : addRoomButton}
+                                    {this.props.isMinimized ? null : badgeContainer}
+                                    {this.props.isMinimized ? null : addRoomButton}
+                                </div>
                             </div>
                             {this.props.isMinimized ? badgeContainer : null}
                             {this.props.isMinimized ? addRoomButton : null}