JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<table bgcolor="#CCCCCC" width="800" height="3000" align="center" border="1">
    <tr>
        <td width="150" valign="top">
            <div style="width:100px;height:100;background:white;">111</div>
            <br><br><br><br><br><br><br><br>
            <div style="width:100px;height:100;background:blue;">222</div>
            <br>
            <div style="width:100px;height:100;background:yellow;">333</div>
            <br>
            <div style="width:100px;height:100;background:pink;">444</div>
            <br>
            <div style="width:100px;height:100;background:maroon;">555</div>
            <br>
            <!-- AD -->
            <div style="width:100px;height:100;background:red;" id="sidebar">dfdffdfdfdf</div>
            <br>
        </td>
        <td width="500"></td>
        <td width="150"></td>
    </tr>
</table>

JavaScript

$(function () {

    var $sidebar = $("#sidebar"),
        $window = $(window);
    
    $window.scroll(function () {
        if ($window.scrollTop() > $window.height() / 2) {
            
            $sidebar.css('position', 'absolute');
            $sidebar.css('top', $window.scrollTop() + $window.height() / 2);
            $sidebar.slideDown(500);
        } else {
            $sidebar.css('position', 'auto');
            $sidebar.css('top', 'auto');
        }
    });

});