Function is undefined

I am really new to javascript, so here is the deal:

I’m trying to implement a reading-position-indicator into my wordpress theme. Therefore I hooked a div directly behind the footer near all the script-tags, cause this position-bar should stick on the bottom of the screen. Then I tried to implement some kind of custom.js, which normally should vary the width of the position-indicator depending on how far the user has scrolled down. But this fails, and I don’t know why, even I am aware about the fact that it will be some cardinal fault I’ve made based on my lacking experience with JS.

Evertime the console just sends “Reference Error: xyz is not defined”

Here is the code, which also can be inspected on jsfiddle (, although it might be a little bit useless, cause the script runs in a wordpress environment, which can’t be emulated there).

HTML/PHP-Hook Markup:

add_action('wp_footer', 'tg_wp_footer');
function tg_wp_footer() { 
if ( is_singular() ) echo '<div id="reading-position-indicator"></div>';
} 

JS-Markup:

if( '"is_singular && reading_indicator"' ){
    var reading_content = $the_post.find( '.entry' );
    if( reading_content.length > 0 ){

        reading_content.imagesLoaded(function() {
            var content_height  = reading_content.height();
                window_height   = $window.height();

            $window.scroll(function() {
                var percent         = 0,
                    content_offset  = reading_content.offset().top;
                    window_offest   = $window.scrollTop();

                if (window_offest > content_offset) {
                    percent = 100 * (window_offest - content_offset) / (content_height - window_height);
                }
                jQuery('#reading-position-indicator').css('width', percent + '%');
            });
        });
    }
}

CSS-Markup:

#reading-position-indicator {
display: block;
height: 4px;
position: fixed;
bottom: 0;
left: 0;
background: #FF8500;
width: 0;
z-index: 9999;
max-width: 100%;
}

https://jsfiddle.net/cn49ubr6/1/

The bar should only appear on blog-post, therefore I tried to use “is_singular”. How do I define to avoid the ReferenceError? Atm console says “$the_post” is not defined. Before that, when I tried it without the ‘” ‘” in the first line, I got the error is_singular is not defined.

Kind Regards!