position: sticky stops half way? - css

Question

I have a sidebar that has the position: sticky added to it, but when I scroll past a certain point it stops being sticky?!
Tested in Chrome version: Version 61.0.3163.100 and Safari Version: 11.0
HTML:
<div class="sticky">
this should stick!
</div>
<div class="content">
this is content
</div>
CSS:
<style media="screen">
.sticky {
background-color: #ccc;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 15px;
width: 100px;
float: left;
}
.content{
background-color: #eee;
height: 3000px;
width: 700px;
float: right;
}
</style>

Answer 1

position: sticky; is not supported most of browsers http://caniuse.com/#feat=css-sticky
You can try something like this:
HTML:
<div class="sticky-block">
this should stick!
</div>
CSS:
.sticky {
position: fixed;
top: 15px;
}
JS:
var $stickyBlock = document.querySelector('.sticky-block');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin
function onScroll() {
window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
$stickyBlock.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
or jQuery:
var $stickyBlock = $('.sticky-block');
var origOffsetY = $stickyBlock.offset().top - 15; // 15 is your top margin
function onScroll() {
window.scrollY >= origOffsetY ? $stickyBlock.addClass('sticky') :
$stickyBlock.removeClass('sticky');
}
$(document).on('scroll', onScroll);
jsfiddle

Answer 2

Here, try this, I would say it's better for this rather than using "Sticky" and it doesn't use Jquery or anything just simple position fixed.
Html
<div class="sticky">
this should stick!
</div>
<div class="content">
this is content
</div>
Css
.sticky {
background-color: #ccc;
top: 15px;
width: 100px;
float: left;
position:fixed;
}
.content{
background-color: #eee;
height: 3000px;
width: 700px;
float: right;
}
https://jsfiddle.net/udxuh1qf/

Answer 3

I tested your code on jsfiddle and also here, it is probably your screen media query that causes your problem. Check out my version of sticky. I hope it will fix your issue.
.sticky {
background-color: #ccc;
color:red;
position: sticky;/* required */
position: -webkit-sticky;/* required */
top: 15px; /* required */
float:left;
}
.content{
background-color: #eee;
height: 3000px;
width: 700px;
float right;
}
<div class="sticky">
this should stick!
</div>
<div class="content">
this is content
</div>