Sticky sidebar

components/detailed-roadmap/index.js

@@ -13,6 +13,7 @@ import {
   SidebarButton,
   MobileSidebar,
   MobileSidebarWrap,
+  DesktopSidebarWrap,
   PageTitle,
   PageDetail
 } from './style';
@@ -106,9 +107,11 @@ const DetailedRoadmap = ({ roadmap }) => {
       </MobileNavHeader>
 
       <Summary className="container">
-        <Sidebar className="sidebar d-none d-md-block">
+        <DesktopSidebarWrap className="d-none d-md-block">
-          { roadmapPages }
+          <Sidebar>
-        </Sidebar>
+            { roadmapPages }
+          </Sidebar>
+        </DesktopSidebarWrap>
         <PageDetail>
           <PageTitle>{ currentPage.title }</PageTitle>
           <MdRenderer>

components/detailed-roadmap/style.js

@@ -80,7 +80,6 @@ export const PageTitle = styled.h1`
 `;
 
 export const Sidebar = styled.div`
-  border-left: 1px solid #efefef;
   padding-bottom: 150px;
 
   ul {
@@ -146,6 +145,16 @@ export const Sidebar = styled.div`
   }
 `;
 
+export const DesktopSidebarWrap = styled.div`
+  border-left: 1px solid #efefef;
+  
+  ${Sidebar} {
+    position: sticky;
+    top: 0;
+    background: white;
+  }
+`;
+
 export const MobileSidebarWrap = styled.div`
   position: absolute;
   z-index: 999;
@@ -164,6 +173,7 @@ export const MobileSidebarWrap = styled.div`
 `;
 
 export const MobileSidebar = styled(Sidebar)`
+  border-left: 1px solid #efefef;
   margin-left: 12px;
   padding-bottom: 20px;