JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<div class="content">header</div>
<div>
  <div class="fixme">Share</div>
  <div class="content">article content</div>
</div>
<div class="content">Footer</div>

CSS

body {
  height: 3000px;
}

.content {
  height: 500px;
}

.fixme {
  position: sticky;
  top: 0;
  background: green;
  color: white;
  text-align: center;
  width: 100%;
}

JavaScript

/* var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
}); */