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,12 +407,14 @@ var RoomSubList = React.createClass({
         }
 
         return (
+            <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 {