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,6 +311,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
+                                <div className="mx_RoomSublist2_stickyHeaderBlur">
                                     <AccessibleButton
                                         inputRef={ref}
                                         tabIndex={tabIndex}
@@ -326,6 +327,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     {this.props.isMinimized ? null : badgeContainer}
                                     {this.props.isMinimized ? null : addRoomButton}
                                 </div>
+                            </div>
                             {this.props.isMinimized ? badgeContainer : null}
                             {this.props.isMinimized ? addRoomButton : null}
                         </div>