JSFiddle - React, Tailwind, and code Playground

HTML

<div id="news-feed">Scroll to see News (Newest First)
    <article id="article0">News are feeling lazy to get loaded</article>
</div>

CSS

article {
    margin-top: 700px;
    opacity: 0;
    border: 2px solid #864488;
    padding: 5px 10px 10px 5px;
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #DCD3E8),
	color-stop(1, #BCA3CC)
);
background-image: -o-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
background-image: -moz-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
background-image: -webkit-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
background-image: -ms-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
background-image: linear-gradient(to bottom, #DCD3E8 0%, #BCA3CC 100%);
color: gray;
font-family: arial;    
}

article h4 {
    font-family: "Times New Roman";
    margin: 5px 1px;
}

.main-news {
    border: 5px double gray;
    padding: 15px;
}

JavaScript

var newsData,
        SortData = '',
        i = 1;
    
$.getJSON("http://www.stellarbiotechnologies.com/media/press-releases/json", function(data) {
       newsData = data.news;
    
    function SortByDate(x,y) {
      return ((x.published == y.published) ? 0 : ((x.published < y.published) ? 1 : -1 ));
    }
var sortedNewsData = newsData.sort(SortByDate);
$.each( sortedNewsData, function( key, val ) {
    SortData += '<article id="article' + i + '"><h4>Published on: ' + val.published + '</h4><div class="main-news">' + val.title + '</div></article>';
    i++;    
    });
    
    $('#news-feed').append(SortData);
});

$(window).scroll(function() {
    //var newsFeedOffset = $('#news-feed').offset();
    var $window = $(window),
        wH = $window.height(),
		wS = $window.scrollTop() + 1;
			    
    if ($('#news-feed').offset().top < $window.scrollTop()) {
        $('article').css('visibility', 'visible');
    }
    
    
    for (var j=0; j<$('article').length;j++) {
        var eT = $('#article' + j ).offset().top,
		    eH = $('#article' + j ).outerHeight();
        if (wS > ((eT + eH) - (wH))) {
            $('#article' + j ).animate({'opacity': '1'}, 500);
        }
    }
    
    if ($('#news-feed').offset().top > wS) {
        $('#article0, article').css({'opacity': '0'});
        
    }
				
});