Make hidden div appear on scroll in WordPress

Question

there are several posts about this, but for some reason, I can't seem to get it to work. I have a floating button that I would like to appear while scrolling. I've added the script to my header and css. Not sure what I'm doing wrong here.

Some posts I've tried to work with:

Show div on scrollDown after 800px

Make div appear on scroll in wordpress

Make <div> appear upon scrolling

--PHP--

add_action('wp_header', 'subscribe_float');
function subscribe_float() {
?>
    <script type="text/javascript"> 
        jQuery(function($) {
            $(document).scroll(function () {
                var y = $(this).scrollTop();
                if (y > 50) {
                    $('#custom_html-12').slideDown();
                } else {
                    $('#custom_html-12').slideUp();
                }
            });
        });
    </script>
<?php } ?>


--CSS--

#custom_html-12 {
    background: #fbbd14;
    position: fixed;
    bottom: 55px;
    z-index: 999;
    right: 20px;
    padding: 5px;
    color: #fff;
    border-radius: 4px;
    display: none;
}

Answer 1

The hook is wp_head, not wp_header. Thus, your code should be:

add_action('wp_head', 'subscribe_float');