title: Making a button appear on scroll with Javascript / jQuery
body: <p>The button already has Javascript this is why I'm including it below - this code is separate to my question though. This is to change the button into something else ON CLICK - I want to keep the button hidden, until scroll... Looked all over and I'm unable to find the right way. (very new to JS).. and whenever I fiddle with the code it's breaking the JS which is why I'm seeking help.. it would be greatly appreciated. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#mydiv").hide();
    $("#show").click(function() {
      $("#mydiv").toggle();
      $("#show").toggle();
    });
    $("#hide").click(function() {
      $("#mydiv").hide();
      $("#show").show();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mydiv {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 360px;
  }
  
  .btn-purple {
    width: 360px;
    background: #721a71;
    color: #fff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  
  .myheader {
    background: #721a71;
    color: #fff;
    padding: 10px;
  }
  
  .mybody {
    background: #f5f5f5;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn btn-purple" id="show"&gt;
    Get in touch &lt;i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"&gt;&lt;/i&gt;
  &lt;/div&gt;
  
  &lt;div id="mydiv"&gt;
    &lt;div class="myheader text-center"&gt;
      Get in touch &lt;i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"&gt;&lt;/i&gt;
    &lt;/div&gt;
  
    &lt;div class="mybody"&gt;
      &lt;p class="d-none d-md-block"&gt;Number: &lt;a class="external" href="#"&gt;01522 123456&lt;/a&gt;&lt;/p&gt;
      &lt;p class="d-none d-md-block"&gt;Email: &lt;a class="external" href="#"&gt;example@example.co.uk&lt;/a&gt;&lt;/p&gt;
      &lt;p class="d-none d-md-block"&gt;Bookings: &lt;a class="external" href="#"&gt;booking.example.co.uk&lt;/a&gt;&lt;/p&gt;
      &lt;p class="d-md-none"&gt;&lt;a class="btn btn-primary btn-block mt-4 mb-4" href="#"&gt;Call &lt;span class="fa fa-phone" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;p class="d-md-none"&gt;&lt;a class="btn btn-primary btn-block mt-4 mb-4" href="#"&gt;Email &lt;span class="fa fa-envelope" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;p class="d-md-none"&gt;&lt;a class="btn btn-primary btn-block mt-4 mb-4" href="#"&gt;Book &lt;span class="fa fa-sign-in" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>