Initial pass at sticky headers for the LHS panel section labels

src/components/structures/RoomSubList.js

@@ -79,6 +79,7 @@ var RoomSubList = React.createClass({
         incomingCall: React.PropTypes.object,
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
+        headerStack: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -406,11 +407,13 @@ var RoomSubList = React.createClass({
         }
 
         return (
-            <div onClick={ this.onClick } className="mx_RoomSubList_label">
-                { this.props.collapsed ? '' : this.props.label }
-                <div className="mx_RoomSubList_roomCount">{roomCount}</div>
-                <div className={chevronClasses}></div>
-                {badge}
+            <div className="mx_RoomSubList_stickyContainer">
+                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
+                    <div className={chevronClasses}></div>
+                    {badge}
+                </div>
             </div>
         );
     },

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -20,18 +20,33 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSubList_stickyContainer {
+    height: 29px;
+    position: relative;
+}
+
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
     color: #3d3b39;
     font-weight: 600;
     font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
     background-color: rgba(118, 207, 166, 0.2);
+    z-index: 3;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 2;
+    pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_label {