fix sidebar on scoll down when page is really long

debomatic-webui/public/javascripts/main.js

@@ -62,4 +62,14 @@ $(window).on('hashchange', function() {
 
 $(window).on('load', function (){
   Page.update(old_data)
+  $(window).scroll(function() {
+    var offset = $("#file").offset();
+    if ($(window).scrollTop() > offset.top + 220) {
+      $("#sticky").stop().addClass('fixed');
+    } 
+    else {
+      $("#sticky").stop().removeClass('fixed');
+    }
+  });
+  
 });

debomatic-webui/public/stylesheets/style.css

-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-a {
-  color: #00b7ff;
+.fixed {
+  position: fixed;
+  width: 220px !important;
+  top: 10px;
 }

debomatic-webui/public/stylesheets/style.styl

-body
-  padding: 50px
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
-a
-  color: #00B7FF
+.fixed
+  position fixed
+  width 220px !important;
+  top 10px;
+
\ No newline at end of file

debomatic-webui/views/index.ejs

@@ -23,6 +23,7 @@
           <ul class="nav nav-pills nav-stacked"></ul>
         </nav>
         
+        <div id="sticky" >
           <section id="files">
             <h3 class="title">Files</h3>
             <nav id="logs">
@@ -37,6 +38,7 @@
               <ul></ul>
             </nav>
         </section>
+      </div>
 
       </aside>
 

debomatic-webui/views/layout.ejs

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/libs/bootstrap/3.1.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="/libs/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="/stylesheets/style.css">
     
     <script src='//code.jquery.com/jquery-1.7.2.min.js'></script>
     <script src='//localhost:3000/socket.io/socket.io.js'></script>