Попап (прилипающий блок, sticky) на javascript

<!-- Sticky -->
<style>
    .myblockbottom {
        position: fixed;
        left: 0;
        bottom: 0;
        height: auto;
        display: none;
        padding: 0px;
        text-align: center
    }

    .myblockbottom__close {
        position: absolute;
        right: 0;
        width: 40px;
        height: 40px;
        transition: all .3s ease-out;
        z-index: 1;
        top: -35px;
        cursor: pointer;
    }

    .myblockbottom__close::after, .myblockbottom__close::before {
        content: '';
        position: absolute;
        top: 10px;
        width: 24px;

        height: 3px;
        z-index: 2;
        background-color: #8f9cb5;
    }

    .myblockbottom__close::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        left: 8px;
    }

    .myblockbottom__close::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        right: 8px;
    }
</style>
<script>
    if (window.innerWidth <= 720) {
        document.write('<div class="myblockbottom"><div class="myblockbottom__close"></div><div id="yandex_rtb_block"></div><div style="width:320px;height:100px;"><!-- Yandex.RTB R-A-XXXXXX-24 --><div id="yandex_rtb_R-A-428726-24"></div></div></div>');
    }

    window.yaContextCb.push(() => {
        Ya.Context.AdvManager.render({
            renderTo: 'yandex_rtb_R-A-XXXXXX-24',
            blockId: 'R-A-XXXXXX-24'
        })
    });

    (function () {

        document.addEventListener("scroll", checkIfNearPosition);

        document.querySelector('.myblockbottom__close').addEventListener('click', function (e) {
            e.target.parentNode.style.display = 'none', document.removeEventListener("scroll", checkIfNearPosition)
        });

        function checkIfNearPosition() {
            var x = document.querySelector('.myblockbottom');
            window.pageYOffset > 200 && (x.style.display = 'block') || (x.style.display = 'none')
        }

    })();
</script>
<!-- End Sticky -->

Здесь мы выводим блок в левом нижнем углу когда пользователь опустится на 200px вниз (window.pageYOffset > 200).

В зависимости от реферера:

    <?php
    echo <<<EOL
    <!-- Sticky -->
    <style>
        .myblockbottom {
            position: fixed;
            left: 0;
            bottom: 10px;
            height: auto;
            display: none;
            padding: 0px;
            text-align: center
        }

        .myblockbottom__close {
            position: absolute;
            right: 0;
            width: 40px;
            height: 40px;
            transition: all .3s ease-out;
            z-index: 1;
            top: -35px;
            cursor: pointer;
        }

        .myblockbottom__close::after, .myblockbottom__close::before {
            content: '';
            position: absolute;
            top: 10px;
            width: 24px;

            height: 3px;
            z-index: 2;
            background-color: #8f9cb5;
        }

        .myblockbottom__close::before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            left: 8px;
        }

        .myblockbottom__close::after {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            right: 8px;
        }
    </style>
    <script>
    if (window.innerWidth <= 720) {
    EOL;
    if (strpos($_SERVER['HTTP_REFERER'], 'yandex.') !== false) {
        echo <<<EOL
            document.write('<div class="myblockbottom"><div class="myblockbottom__close"></div><div id="yandex_rtb_block"></div><div style="width:336px;height:280px;"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></div></div>');

        (adsbygoogle = window.adsbygoogle || []).push({});
        EOL;
    } else {
        echo <<<EOL
            document.write('<div class="myblockbottom"><div class="myblockbottom__close"></div><div id="yandex_rtb_block"></div><div style="width:320px;height:100px;"><div id="yandex_rtb_R-A-xxxxxx-xx"></div></div></div>');
        window.yaContextCb.push(()=>{
          Ya.Context.AdvManager.render({
            renderTo: 'yandex_rtb_R-A-xxxxxx-xx',
            blockId: 'R-A-xxxxxx-xx'
          })
        });
        EOL;
    }
    
    echo <<<EOL
        (function () {

            document.addEventListener("scroll", checkIfNearPosition);

            document.querySelector('.myblockbottom__close').addEventListener('click', function (e) {
                e.target.parentNode.style.display = 'none', document.removeEventListener("scroll", checkIfNearPosition)
            });

            function checkIfNearPosition() {
                var x = document.querySelector('.myblockbottom');
                window.pageYOffset > 200 && (x.style.display = 'block') || (x.style.display = 'none')
            }

        })();
        }
    </script>
    <!-- End Sticky -->
EOL;