Add nav border on scroll

2 files changed, 15 insertions, 0 deletions

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index a5f99bcdd8f..341fc6fc3e4 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -1,4 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
+import _ from 'underscore';
 
 (function() {
   var hideEndFade;
@@ -45,4 +46,14 @@
       }
     });
   });
+
+  function applyScrollNavClass() {
+    if ($(window).scrollTop() > 0) {
+      $('.navbar-gitlab').addClass('scroll');
+    } else {
+      $('.navbar-gitlab').removeClass('scroll');
+    }
+  }
+
+  $(window).scroll( _.throttle(applyScrollNavClass, 250));
 }).call(window);
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f70f8c51bd4..4650997a9b7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -42,6 +42,10 @@ header {
       border-bottom: none;
     }
 
+    &.scroll {
+      border-bottom: 1px solid $border-color;
+    }
+
     .container-fluid {
       width: 100% !important;
       filter: none;