title: Cause fixed div to show/hide on scroll with javascript
body: <p>I have searched around and tried several solutions and nothing is working for me. I am trying to replicate a similar functionality to the "schedule a demo" button seen here: www.bamboohr.com</p>
  
  <p>I currently have the following html, css, and javascript. It seems to work fine in jsfiddle, but not when I implement it into my WordPress child theme. I have pasted the html in the header.php of my child theme, the css into a custom stylesheet, and the javascript loading from another file linked in the header.php.</p>
  
  <p>Can someone please help me figure out why this isn't working?</p>
  
  <p>This is right before the main content <code>&lt;div&gt;</code>:</p>
  
  <pre><code>    &lt;div class="askFloater"&gt;
        &lt;a href="http://workforcematters.hubicle.com" target="_blank"&gt;
          &lt;i class="icon-question-sign"&gt;&lt;/i&gt;&lt;br /&gt;
          Ask Us Anything
        &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This loads in the <code>&lt;head&gt;</code> section:</p>
  
  <pre><code>    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" &gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://dev.workforcematters.com/wp-content/themes/swatch-child-theme/javascripts/askFloater.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is in the stylesheet:</p>
  
  <pre><code>.askFloater {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 0;
  width: 70px;
  height: 100px;
  text-align: center;
  background-color: #3498db;
  border-radius: 3px 0 0 3px;
  padding: 16px 16px 0;
  z-index: 1;
  }
  
  .askFloater a {
  color: #fff;
  font-size: 18px;
  text-transform: lowercase;
  font-family: 'Muli', 'Lucida Grande', sans-serif;
  }
  
  .askFloater:hover {
  background-color: #4ea5db;
  }
  </code></pre>
  
  <p>This is in the "askFloater.js" file:</p>
  
  <pre><code>$(document).scroll(function () {
  var y = $(this).scrollTop();
  if (y &gt; 800) {
      $('.askFloater').fadeIn();
  } else {
      $('.askFloater').fadeOut();
  }
  
  });
  </code></pre>