Merge pull request #795 from taigaio/issue/3653/sticky-nav

Set Sticky navigation bar on scroll

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Drag files from desktop to attachments section.
 - Drag files from desktop in wysiwyg textareas.
 - New design for the detail pages slidebar.
+- Sticky project navigation bar.
 
 ### Misc
 - Lots of small and not so small bugfixes.
@@ -17,7 +18,6 @@
 ## 1.9.1 Taiga Tribe (2016-01-05)
 
 ### Features
-- Statics folder hash.
 - [118n] Now taiga plugins can be translatable.
 - New Taiga plugins system.
 - Now superadmins can send notifications (live announcement) to the user (through taiga-events).

app/modules/components/project-menu/project-menu.directive.coffee

@@ -31,6 +31,16 @@ ProjectMenuDirective = (projectService, lightboxFactory) ->
             return projectService.project
         ), projectChange
 
+        scope.vm.fixed = false
+        $(window).on "scroll", () ->
+            position = $(window).scrollTop()
+            if position > 100 && scope.vm.fixed == false
+                scope.vm.fixed = true
+                scope.$digest()
+            else if position < 100 && scope.vm.fixed == true
+                scope.vm.fixed = false
+                scope.$digest()
+
     return {
         scope: {},
         controller: "ProjectMenu",

app/modules/components/project-menu/project-menu.jade

@@ -1,4 +1,7 @@
-nav.menu(ng-if="vm.project")
+nav.menu(
+    ng-if="vm.project"
+    ng-class="{'menu-fixed': vm.fixed}",
+) 
     div(class="menu-container")
         ul(class="main-nav")
             li(id="nav-search")

app/styles/modules/common/nav.scss

@@ -3,8 +3,17 @@ $label-arrow-wh: 12px;
 tg-project-menu {
     background-position: 0 -300px;
     min-height: $main-height;
+    min-width: 50px;
     padding: 1rem 0;
+    position: relative;
     text-transform: uppercase;
+    z-index: 9;
+    .menu {
+        &.menu-fixed {
+            position: fixed;
+            top: 1rem;
+        }
+    }
 }
 
 .main-nav {