in response to #114 (comment)

z · z · commit 321293449301 · 2017-12-12T01:15:47.000+05:30
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
@@ -24,6 +24,15 @@ const CurriculumSection = styled.section`
     border-right: 1px solid #f5f5f5;
     min-width: 250px;
   }
+  & .toc_sticky {
+    ${breakpoints.xs} {
+      position: sticky;
+      z-index: 3;
+      left: 0;
+      margin-top: 0.5rem;
+      top: 10rem;
+    }
+  }
   & .toc_title {
     background-color: #374355;
     color: #fff;
@@ -37,11 +46,10 @@ const CurriculumSection = styled.section`
 
 const Fab = styled.div`
   position: sticky;
-  top: 0.5rem;
   z-index: 3;
   left: 0;
   margin-top: 0.5rem;
-  top: 3rem;
+  top: 10rem;
   display: none;
   & .fab_symbol {
     opacity: 0.5;
@@ -104,8 +112,10 @@ export default class Subject extends React.Component {
           <Flex column={false}>
             {this.state.isSidebarOpen ? (
               <Box width={[0, 0.2]} flex={'1 1 auto'} className="box_toc">
-                <div className="toc_title">Table of content</div>
-                <SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
+                <div className="toc_sticky">
+                  <div className="toc_title">Table of content</div>
+                  <SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
+                </div>
               </Box>
             ) : null}
             <Box width={[1, 0.8]} flex={'1 1 auto'} px={[1, 2]} className="box_content">
