<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="sticker">fixed pos until 1000</div> </div> <div class="marker">< 1000</div>

body { font-family: 'Helvetica', sans; } div.wrapper { margin: 260px auto; width:600px; background:#efe; height: 3900px; } div.sticker { padding: 20px; margin: 20px 0; background: #ece; width: 190px; } .stick { position:fixed; top:0px; } .marker { position: absolute; top: 1000px; right: 100px; font-size: 2em; }

$(document).ready(function() { var s = $(".sticker"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos >= pos.top & windowpos <=1000) { s.addClass("stick"); } else { s.removeClass("stick"); } }); });