Animated badge at the bottom of the page WordPress

          

            Copy
            
          
          function add_bottom_image_with_scroll_behavior() {
    ?>
    <style>
        #floating-bottom-image {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            transition: transform 0.3s ease;
            z-index: 9999;
        }

        #floating-bottom-image img {
            max-width: 100%;
            height: auto;
        }

        .hidden-by-scroll {
            transform: translateY(100%);
        }
    </style>

    <div id="floating-bottom-image">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/your-image.jpg" alt="Bottom Image">
    </div>

    <script>
        (function() {
            const imgBox = document.getElementById('floating-bottom-image');

            window.addEventListener('scroll', function() {
                if (window.scrollY > 5) {
                    imgBox.classList.add('hidden-by-scroll');
                } else {
                    imgBox.classList.remove('hidden-by-scroll');
                }
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_bottom_image_with_scroll_behavior');

          

            
              How to use this
            
            Copy