JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal fade" id="modalPostBox1" tabindex="-1" role="dialog" aria-labelledby="modalPostBoxLabel" aria-hidden="true" style="border:1px solid black;">
        <div class="modal-dialog" style="max-width:400px; margin: 0 auto;">
            <div class="modal-content" style="min-height: 600px; height: auto;">
                <div class="modal-body" id="this-is-body" style="height: 430px;padding:0px; overflow: auto; width: 100%;">

                    <div class="stick_out" id="sticker">
                    </div>
                    <ol class="ordered-comments" id="modalPostCommentList" style="margin: 30px 10px 10px 10px;">
                        <li>
                            <div class="comment-1 ordered-list-items" data-id="1322B587-1DB9-C87B-A6FD-90111533319B">
                                <div class="comment-1-right">
                                    <div class="comment-name"
                                         data-commentcontent="1322B587-1DB9-C87B-A6FD-90111533319B">I didn't think it
                                        was that bad
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="comment-1 ordered-list-items" data-id="E6F8ED84-4FE3-2BF7-B2C9-F90726BCC601">
                                <div class="comment-1-right">
                                    <div class="comment-name"
                                         data-commentcontent="E6F8ED84-4FE3-2BF7-B2C9-F90726BCC601">So bad that you ate
                                        it all
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="comment-1 ordered-list-items" data-id="E6F8ED84-4FE3-2BF7-B2C9-F90726BCC601">
                                <div...

CSS

.stick_in {
     height: 160px !important;
     width: 100%;
     top:0;
     position: fixed;
     margin-left: -25%;
     background: url('http://www.rtacpa.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg') bottom center no-repeat;
}
.stick_out {
     height: 300px !important;
     width: 100%;  
     background: url('http://www.rtacpa.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg') bottom no-repeat;
}
li
{
    padding:5px;
}

JavaScript

$(document).ready(function() {
        var s = $("#sticker");
        var pos = s.position();
        $('#this-is-body').scroll(function() {
            var windowpos = $('#this-is-body').scrollTop();
            //console.log("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
            if (windowpos >= 154) {
                if (!s.hasClass('stick_in')) {
                    s.removeClass('stick_out');
                    s.addClass('stick_in');
                  }
            } else{
               if (windowpos == 0) {
                   s.removeClass('stick_in');
                   s.addClass('stick_out');}
            }
        });
    });