JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="volleyDiv" style="display: block;">
  <div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
    <div class="volleyComment" id="volleyCommentUAuCOyQuav">
      <p class="volleyCommentDate">Feb 28th</p>
      <p class="volleyCommentStatus">First comment!</p>
      <p class="volleyCommentAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReply0wblbTaP1R">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">First comment!</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplywBS0WFoUDH">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">Testing two comments on a a page.</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReply5zw2ww9GBo">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">Will it blend?</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplythWrBLrkjy">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">Stay with me.</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplythWrBLrkjy">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">How about now?</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplythWrBLrkjy">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">LeBron is looking motivated.</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplythWrBLrkjy">
      <p class="volleyReplyDate">Feb 28th</p>
      <p class="volleyReplyStatus">Yes it will.</p>
      <p class="volleyReplyAuthor">John Wexler</p>
    </div>
    <div class="volleyReply" id="volleyReplythWrBLrkjy">
      <p...

CSS

#volleyDiv {
	position:fixed;
	top: 20px;
	right: 30px;

	padding: 10px;

	z-index: 999999999999999999999999999;

	box-sizing: initial;
	background: none;
	border: none;
}

.volleyThreadDiv, #volleyActivityDiv {
	position: static;
	display: none;
	max-height: 300px;
	overflow-y: scroll;
	background: none;
	border: none;
}

.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {  
    background-color: transparent;
}

.volleyComment, .volleyReply {
	margin: 5px 5px 5px 5px;
	padding: 5px;

	border: 2px solid #63c5e2; /* blue border */
	border-radius: 8px;

	width: 155px;

	background: white;

	box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
	box-sizing: initial;
}

.volleyCommentStatus, .volleyReplyStatus {
	padding: 0px 5px 0px 5px;
	margin: 0px 0px 0px 0px;

	font-family: 'Avenir Next', Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #262626;

	line-height: 1.5;

	word-wrap: break-word;
}

.volleyCommentStatus, .volleyReplyStatus {
	text-align: left;
}

.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
	font-family: 'Avenir Next', Helvetica, sans-serif;
	font-weight: normal;
	color: #63c5e2 !important;
	text-decoration: none !important;
	border: none;
	padding: none;
	margin: none;
	background-color: white !important;
}

.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
	font-family: 'Avenir Next', Helvetica, sans-serif;
	font-weight: normal;
	color: gray !important;
	text-decoration: none !important;
	border: none;
	padding: none;
	margin: none;
	background-color: white !important;
}

.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
	font-family: 'Avenir Next', Helvetica, sans-serif;
	font-style: italic;
	font-size: 10px;
	font-weight: normal;
	color: gray;

	margin: 0px 5px 0px 0px;

	line-height: 1.5;
}

.volleyReplyAuthor {
	clear: both;
	text-align: left;
	padding: 0px 5px 0px...

JavaScript

$('#volleyThreadDivUAuCOyQuav').scroll(function() {
    console.log('userDidscroll...');
    $('.volleyComment').each(function () {
        var height = $(this).css('height');
        var heightNumeric = height.substring(0, height.length - 2);
        heightNumeric = Number(heightNumeric);
        if ($(this).position().top + heightNumeric < 130) {
            $(this).stop().fadeTo(0, 0.2);
        } else {
            $(this).stop().fadeTo(0, 100);
        }
    });

    $('.volleyReply').each(function () {
        var height = $(this).css('height');
        var heightNumeric = height.substring(0, height.length - 2);
        heightNumeric = Number(heightNumeric);
        if ($(this).position().top + heightNumeric < 130) {
            $(this).stop().fadeTo(0, 0.2);
        } else {
            $(this).stop().fadeTo(0, 100);
        }
    });
});