title: .fadeTo issues with jQuery on scroll
body: <p>I’m trying to change the opacity of my navigation bar as I scroll past a div on my page. My code is below. To change the opacity, I’m trying to use jQuery’s .fadeTo method. I’m attempting to have it fade the opacity to 0.95 (from the 0.75 outlined in the CSS) after scrolling past the height of a flexible div with the class “splash”. What am I doing wrong? Is .fadeTo simply not compatible with this sort of technique? How could I implement this properly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(window).scroll(function() {
      var y = $(window).scrollTop();
      var splashHeight = $("div.one").height();
      if (y &gt; splashHeight) {
        $("nav").fadeTo("500", 0.95);
      } else {
        $("nav").fadeTo("500", 0.75);
      };
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    width: 100%;
    position: fixed;
    height: 50px;
    top: 0px;
    left: 0px;
    background-color: white;
    opacity: 0.75;
    z-index: 1000;
  }
  nav ul {
    display: block;
    list-style: none;
    text-align: center;
    position: relative;
    margin: 10px auto 0 auto;
    width: 500px;
  }
  nav ul li {
    display: inline;
    width: 150px;
    font-family: "Montserrat", sans-serif;
    padding: 0 20px;
    font-size: 18px;
    text-align: center;
  }
  nav ul li a {
    transition: all 0.6s ease;
    color: #008040;
  }
  nav ul li a:hover {
    color: black;
  }
  nav ul li.active {
    cursor: default;
  }
  div.splash {
    height: 100%;
    width: 100%;
    z-index: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.75;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
    &lt;title&gt;DragonTech &amp;mdash; Home&lt;/title&gt;
  
    &lt;link href="css/foundation.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/animate.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/normalize.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/app.css" rel="stylesheet" type="text/css" /&gt;
  
    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li class="active"&gt;Home&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Appointment&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;div class="splash one"&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>