Example of making a div stick to the top of the screen using CSS and JavaScript:

Source Code: (back to article)

<!DOCTYPE html>
<html>
 <head>
 <title>Title of the document</title>
 <style>
 #boxThis {
 padding: 5px;
 background-color: #80c294;
 font-size: 1.5em;
 width: 300px;
 text-align: center;
 font-weight: bold;
 border: 1px solid #666;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }
 #boxThis.box {
 margin-top: 0;
 position: fixed;
 top: 0;
 z-index: 9999;
 -webkit-border-radius: 0 0 10px 10px;
 border-radius: 0 0 10px 10px;
 }
 </style>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 </head>
 <body>
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 
 <div id="boxHere"></div>
 <div id="boxThis">Box</div>
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 lorem
 
 <script>
 function boxtothetop() {
 var windowTop = $(window)
 .scrollTop();
 var top = $('#boxHere')
 .offset()
 .top;
 if(windowTop > top) {
 $('#boxThis')
 .addClass('box');
 $('#boxHere')
 .height($('#boxThis')
 .outerHeight());
 } else {
 $('#boxThis')
 .removeClass('box');
 $('#boxHere')
 .height(0);
 }
 }
 $(function() {
 $(window)
 .scroll(boxtothetop);
 boxtothetop();
 });
 </script>
 </body>
</html>