JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div></div>
<div class="test">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis possimus, et cum sunt, rem, autem consectetur eveniet animi quidem incidunt.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vero consequatur, fuga officia temporibus molestiae possimus? Atque iure veritatis...

SCSS

body > div {
  height: 100vh;
  overflow: hidden;
}

body > div:nth-child(odd) {
  background: #ccc;
}

div > div {
  height: 100%;
  overflow: hidden;
  position: relative;
}

div > div 9 {
  height: 100%;
  position: sticky; top:0;
}

JavaScript

jQuery(document).ready(function($) {
  var distance = $('.test').offset().top,
    $window = $(window);

  $window.scroll(function() {
    if ($window.scrollTop() >= distance) {
      $('body').css('overflow', "hidden");
      $('.test > div').css('overflow', 'auto');
    }





  });

  $('.test div').scroll(function() {
    var a = $('.test p').position().top;
    var b = $('.test > div').height() - $('.test p').outerHeight();

    var c = Math.floor((a / b) * 100);

    if (c < 100 || c > 0) {
      $('body').css('overflow', "hidden");
      $('.test > div').css('overflow', 'auto');
    } else if (c==0 || c == 100) {
      $('body').css('overflow', "auto");
      $('.test > div').css('overflow', 'hidden');
    }
  });
});