https://github.com/NodeBB/NodeBB/issues/8783

less/topics_list.less

@@ -2,3 +2,15 @@
     margin-bottom: 0px;
     padding: 10px 16px;
 }
+
+.topic-list-header {
+    position: sticky;
+    top: @navbar-height;
+    background-color: @body-bg;
+    z-index: @zindex-navbar;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-top: 1px solid @post-border-color;
+    border-bottom: 1px solid @post-border-color;
+}

templates/category.tpl

@@ -8,9 +8,7 @@
 	<div class="category <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
 		<!-- IMPORT partials/category/subcategory.tpl -->
 
-		<!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
+		<div class="topic-list-header clearfix">
-
-		<div class="clearfix">
 			<!-- IF privileges.topics:create -->
 			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
 			<!-- ELSE -->
@@ -30,10 +28,6 @@
 			</span>
 		</div>
 
-		<hr class="hidden-xs" />
-
-		<p class="hidden-xs">{name}</p>
-
 		<!-- IF !topics.length -->
 		<!-- IF privileges.topics:create -->
 		<hr class="visible-xs" />

templates/popular.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="popular">
-	<div class="btn-toolbar">
+	<div class="topic-list-header btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
@@ -47,8 +47,6 @@
 		</div>
 	</div>
 
-	<br />
-
 	<div class="category">
 		<!-- IF !topics.length -->
 		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>

templates/recent.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="recent">
-	<div class="btn-toolbar">
+	<div class="topic-list-header btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
@@ -37,8 +37,6 @@
 		</div>
 	</div>
 
-	<hr class="hidden-xs"/>
-
 	<div class="category">
 		<!-- IF !topics.length -->
 		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>

templates/tag.tpl

@@ -1,7 +1,7 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="tag">
-	<div class="btn-toolbar">
+	<div class="topic-list-header btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
@@ -11,8 +11,6 @@
 		</div>
 	</div>
 
-	<hr class="hidden-xs"/>
-
 	<!-- IF !topics.length -->
 	<div class="alert alert-warning">[[tags:no_tag_topics]]</div>
 	<!-- ENDIF !topics.length -->

templates/top.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="top">
-	<div class="btn-toolbar">
+	<div class="topic-list-header btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
@@ -47,8 +47,6 @@
 		</div>
 	</div>
 
-	<hr class="hidden-xs"/>
-
 	<div class="category">
 		<!-- IF !topics.length -->
 		<div class="alert alert-warning" id="category-no-topics">[[top:no_top_topics]]</div>

templates/unread.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="unread">
-	<div class="btn-toolbar">
+	<div class="topic-list-header btn-toolbar">
 		<div class="pull-left">
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="inline-block">
@@ -55,8 +55,6 @@
 		</div>
 	</div>
 
-	<hr class="hidden-xs"/>
-
 	<div class="category">
 		<div id="category-no-topics" class="alert alert-warning <!-- IF topics.length -->hidden<!-- ENDIF topics.length -->">[[unread:no_unread_topics]]</div>