title: How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?
body: <p>How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work.
  Here's My HTML and CSS:</p>
  
  <pre><code>&lt;DOCTYPE html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css"&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
  
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              $(window).scroll(
                  {
                      previousTop: 0
                  }, 
                  function () {
                  var currentTop = $(window).scrollTop();
                  if (currentTop &lt; this.previousTop) {
                      //$(".sidebar em").text("Up"); /* optional for demo */
                      $(".nav").css({ opacity: 0.5 });
                  } else {
                      //$(".sidebar em").text("Down");
                      $(".nav").css({ opacity: 0 });
                  }
                  this.previousTop = currentTop;
              });
  
          });
      &lt;/script&gt;
      &lt;script src="js/jjquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="nav"&gt;
          &lt;ul&gt;
              &lt;div class="btn-group"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Browse&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;BHS Lunch&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/div&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.nav {
  height: 35px;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  width: 100%;
  /*border: 1px solid black;*/
  /*background-color: #AA3C39;*/
  background-color: #AA3C39;
  /*opacity: 0.7;*/
  position: fixed;
  </code></pre>
  
  <p>}</p>