'Position: sticky' not sticking

Question

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.

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 position:sticky

.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;
}

<div class="modal-form-sidebar">

  <p class="contact-text">Text here</p>

  <h1>Email Us</h1>
  <form action="#" id="client_capture_sidebar" method="POST" onsubmit="submitted=true;" target="hidden_iframe" role="form">

    <input type="text" name="field1" placeholder="Your Name" />
    <input type="email" name="field2" placeholder="Email Address" />
    <input type="email" name="field2" placeholder="Phone Number" />
    <textarea name="field3" placeholder="Type your Message"></textarea>
    <input type="submit" value="Send" />

  </form>
  <br>
  <div class="white-txt">or</div>
  <br>
  <h1>Call Us</h1>
  <a class="btn sidebar" href="tel:[phone]"><i class="fa fa-phone" aria-hidden="true"></i>[phone]</a>

</div>

Honor

Is the div that you are trying to position sticky wrapped in a parent element? – Pedestrian

Seems to work for me. Although, I don't see your header. What exactly do you expect that is not happening? Maybe I'm misunderstanding your intent. – Volteface

yes, i am wrapping it in a col-md-4 and also a sidebar wrapper, neither of which have any kind of height or overflow attributes. I am just expecting the sidebar to be fixed once i get 15px below the header. i did have the top attribute changed to 135px to accommodate the header. it will have to check and see if the other containers are causing the issue. I am using wordpress so everything is in a sidebar template. – Honor

It does work but It works untill it gets pushed up by sibblings coming next. If sticky is usefull it is also not working as one would expect (use misunderstood or mistaken), but if it was stuck at top:0; (like a fixed element would ) you would never be able to see or call us at ... What you try to do is actually unclear to me :) – Vie

the code snippet doesn't show what I am trying to accomplish. that was an edit by the community. I am trying to make it so that the sidebar stays within view as the user scrolls down the page. I know that there are other ways to do this using JS, but I was hoping position:sticky would be a nice clean, quick way of accomplishing this. – Honor

well your code works if the browser used understands sticky. There is of course polyfills , but it is not alike fixed, it sees and minds content around it , sticky is within the flow – Vie

If the code you posted doesn't show what you're trying to accomplish, it might help to create a working example to demonstrate. – Volteface

Answer 1

I assume the reason it is not working is because there is no height to your parent container. position:sticky will only fix the element to the height of your parent container. So in your case there is no height of the parent container so once it scrolls to the sticky element there is no distance in the parent container for the sticky element to travel so it looks like nothing is happening because when the sticky element reaches the top it acts like the position goes from static to fixed until the window reaches the bottom of your parent element. So when your element becomes fixed there is a height of 0 in you parent container. I suggest you add your position:sticky to the .col-md-4 instead of the sidebar itself.

Since i don't know what your markup looks like or what version of bootstrap you are using I just assume you are using bootstrap 3 and have created a sample markup located here:

Fiddle Demo

In the demo I have added position:sticky to the col-xs-4 and it works. If you remove that and add it to the sidebar itself it will not work. Now if you scroll all the way down you will see that the sticky element will stop when it hits the red div below. This is because the height for the parent of the sticky element has ended.

So in your case since when the sticky element is removed from the div the height of your parent div is 0 and there is no room for it to scroll. I suggest doing like what I did in my demo and add position:sticky to the col-md-4 instead of the sidebar itself.

Pedestrian

yes! this is working now. I was having trouble recreating my original issue. thank you for this. – Honor

Answer 2

It does work but where position:sticky is implented. see https://caniuse.com/#search=sticky

add some content to see it sticking and if it behaves as you expect , below a snippet where it sticks untill bottom pushes it up. It is actually the correct behavior.

.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;
}

.scrollme {overflow:hidden;height:200vh;background:pink;margin:1em;}
footer {
height:25vh;background:gray;margin:1em;}

<div class="modal-form-sidebar">

  <p class="contact-text">Text here</p>

  <h1>Email Us</h1>
  <form action="#" id="client_capture_sidebar" method="POST" onsubmit="submitted=true;" target="hidden_iframe" role="form">

    <input type="text" name="field1" placeholder="Your Name" />
    <input type="email" name="field2" placeholder="Email Address" />
    <input type="email" name="field2" placeholder="Phone Number" />
    <textarea name="field3" placeholder="Type your Message"></textarea>
    <input type="submit" value="Send" />

  </form>
  <br>
  <div class="white-txt">or</div>
  <br>
  <h1>Call Us</h1>
  <a class="btn sidebar" href="tel:[phone]"><i class="fa fa-phone" aria-hidden="true"></i>[phone]</a>

</div>
<div class="scrollme">tall div</div>
<footer>footer</footer>

Vie

explain downvote or answer yourself . If use of sticky is missunderstood, then question might need to be cleared or downvoted if that's a usefull way to express an opinion !?? – Vie

it must be something else within my page or site that is causing the issue then – Honor

@Honor , okay, then try to reproduce your bug within the snippet you are providing in your question. Notice here, the sticky element is a direct child of body ;) – Vie

downvoter, explain yourselves , answer or even check on how works position:sticky which is also not yet a validated standard ;) – Vie

I suggest that, since no problem has been identified, there is nothing to answer. That is likely the source of downvotes, in my estimation. – Volteface

@showdev, then , you mean also there is no question ? .... a comment do not not allow a snippet to demonstrate it actually works ... ;) Maybe, you should vote to close the question and request clarification – Vie

@Honor yes it will be usefull to you, your question and snippet provided as it is are coherent and this is confusing a few people ;) – Vie

@G-Cyr I agree with you, and I have done just that. My comments are above. I remain curious about what might be going wrong and look forward to a resolution. – Volteface

Answer 3

.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;
}

.scrollme {overflow:hidden;height:200vh;background:pink;margin:1em;}
footer {
height:25vh;background:gray;margin:1em;}

<div class="modal-form-sidebar">

  <p class="contact-text">Text here</p>

  <h1>Email Us</h1>
  <form action="#" id="client_capture_sidebar" method="POST" onsubmit="submitted=true;" target="hidden_iframe" role="form">

    <input type="text" name="field1" placeholder="Your Name" />
    <input type="email" name="field2" placeholder="Email Address" />
    <input type="email" name="field2" placeholder="Phone Number" />
    <textarea name="field3" placeholder="Type your Message"></textarea>
    <input type="submit" value="Send" />

  </form>
  <br>
  <div class="white-txt">or</div>
  <br>
  <h1>Call Us</h1>
  <a class="btn sidebar" href="tel:[phone]"><i class="fa fa-phone" aria-hidden="true"></i>[phone]</a>

</div>
<div class="scrollme">tall div</div>
<footer>footer</footer>

Cloistered