title: 'Position: sticky' not sticking
body: <p>I have created a sidebar and I am simply trying to make it stick about 15px under the header when the user scrolls down. I initially was using JS for this but it really bogged my page speed down and things got choppy. I found that position sticky should work for most browsers, however my sidebar is not sticking on scroll. </p>
  
  <p>I have read in various places to make sure there is no height set and overflow of any kind to the parent element, which it is not. So I am struggling to find the cause of the problem. I am wondering if there are other factors that I did not find online that could have an effect on <code>position:sticky</code></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-css lang-css prettyprint-override"><code>.btn.sidebar {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%;
    background: rgba(255, 255, 255, .6);
    border-radius: 0;
    font-size: 22px;
    transition: ease .5s;
  }
  
  .btn.sidebar:hover {
    background: #97B2AC;
    color: #fff;
  }
  
  p.contact-text {
    color: #eee;
    text-align: center;
  }
  
  div.modal-form-sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    font: 95% Arial, Helvetica, sans-serif;
    width: 320px;
    padding: 16px;
    background: #5d84a1;
  }
  
  .modal-form-sidebar h1 {
    background: rgba(255, 255, 255, .4);
    padding: 13px 0;
    font-size: 140%;
    font-weight: 300;
    text-align: center;
    color: #fff;
    margin: 0;
  }
  
  .modal-form-sidebar input[type="text"],
  .modal-form-sidebar input[type="date"],
  .modal-form-sidebar input[type="datetime"],
  .modal-form-sidebar input[type="email"],
  .modal-form-sidebar input[type="number"],
  .modal-form-sidebar input[type="search"],
  .modal-form-sidebar input[type="time"],
  .modal-form-sidebar input[type="url"],
  .modal-form-sidebar textarea,
  .modal-form-sidebar select {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #555;
    font: 95% Arial, Helvetica, sans-serif;
  }
  
  .modal-form-sidebar input[type="text"]:focus,
  .modal-form-sidebar input[type="date"]:focus,
  .modal-form-sidebar input[type="datetime"]:focus,
  .modal-form-sidebar input[type="email"]:focus,
  .modal-form-sidebar input[type="number"]:focus,
  .modal-form-sidebar input[type="search"]:focus,
  .modal-form-sidebar input[type="time"]:focus,
  .modal-form-sidebar input[type="url"]:focus,
  .modal-form-sidebar textarea:focus,
  .modal-form-sidebar select:focus {
    box-shadow: 0 0 5px #5d84a1;
    padding: 3%;
    border: 1px solid #5d84a1;
  }
  
  .modal-form-sidebar input[type="submit"],
  .modal-form-sidebar input[type="button"] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 3%;
    background: #5d84a1;
    border-bottom: 2px solid #374F60;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    color: #fff;
  }
  
  .modal-form-sidebar input[type="submit"]:hover,
  .modal-form-sidebar input[type="button"]:hover {
    background: #7d9cb3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-form-sidebar"&gt;
  
    &lt;p class="contact-text"&gt;Text here&lt;/p&gt;
  
    &lt;h1&gt;Email Us&lt;/h1&gt;
    &lt;form action="#" id="client_capture_sidebar" method="POST" onsubmit="submitted=true;" target="hidden_iframe" role="form"&gt;
  
      &lt;input type="text" name="field1" placeholder="Your Name" /&gt;
      &lt;input type="email" name="field2" placeholder="Email Address" /&gt;
      &lt;input type="email" name="field2" placeholder="Phone Number" /&gt;
      &lt;textarea name="field3" placeholder="Type your Message"&gt;&lt;/textarea&gt;
      &lt;input type="submit" value="Send" /&gt;
  
    &lt;/form&gt;
    &lt;br&gt;
    &lt;div class="white-txt"&gt;or&lt;/div&gt;
    &lt;br&gt;
    &lt;h1&gt;Call Us&lt;/h1&gt;
    &lt;a class="btn sidebar" href="tel:1-222-222-2222"&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;(222) 222-2222&lt;/a&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>