navbar fixes

_includes/navbar.html

@@ -11,7 +11,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-left" href="/"><span class="navbar-title">Watchout!</span></a>
+          <a class="navbar-left" href="/"><span class="navbar-brand">Watchout!</span></a>
         </div>
 
         <div id="navbar" class="navbar-collapse collapse">

css/base.scss

@@ -102,8 +102,13 @@ body {
 
   &.affix {
     position: fixed;
-  }
+    background: rgba(0, 0, 0, .6);
 
+    &.darken {
+      background: rgba(0, 0, 0, 1);
+    }
+
+  }
 }
 
 
@@ -122,8 +127,8 @@ body {
   border: none;
   padding-top: 5px;
   font-weight: bold;
-  font-family: Merriweather;
-  font-size: 25px;
+  font-family: montserrat;
+  font-size: 14px;
   margin-bottom: 0px;
   border-bottom: 0px;
 
@@ -131,11 +136,8 @@ body {
     margin-top: 0.2em;
   }
 
-  .navbar-title {
+  .navbar-brand {
     text-transform: uppercase;
-    color: #ffffff;
-    line-height: normal;
-    padding-top: 5px;
   }
 
   .navbar-toggle {
@@ -152,7 +154,6 @@ body {
       display: inline-block;
       float: none;
       vertical-align: top;
-      font-size: 15px;
       text-transform: uppercase;
     }
 

js/application.js

@@ -7,6 +7,18 @@ $(function() {
   })
 });
 
+$(window).scroll(function() {
+  var scroll = $(window).scrollTop();
+  var fTop = $('#new-articles').position().top + $('#new-articles').height();
+  if (scroll >= fTop) {
+    $(".navbar-wrapper").addClass("darken");
+
+  } else {
+    $(".navbar-wrapper").removeClass("darken");
+
+  }
+});
+
 function onYouTubeIframeAPIReady() {
   $('.youtube-video').each(function() {
     var id = $(this).data('id');