title: calculate positioning of image to follow scroller
body: <p>I want to draw a line on screen from the top of the page to the bottom when the user scrolls the page and have an arrow at the bottom of it. I don't want to use fixed position so that its always in the same spot, I want it to indicate where they are on the page by determining the page length etc.  </p>
  
  <p>I have the following code that works to a point. The problem with this is the arrow disappears off the bottom of the page when I scroll just after half way down.  </p>
  
  <p>I have tried different variations of this code but none work. Can anyone help?</p>
  
  <pre><code>//Draw dotted line on scroll - works to certain extent but scrolls off page
      $( window ).scroll(function() {
          if ( $.windowScrollTop() &gt; 10 ) {
              var pos = $.windowScrollTop();
              var scrollHeight = $(window).innerHeight();
              var element = $('#dashes');
              $( '#line' ).css( 'height', pos - scrollHeight / 4 );
              $( '#arrow' ).css( 'top', pos - scrollHeight / 4 );
          } else {
              $( '#line' ).css( 'height', '6px' );
              $( '#arrow' ).css( 'top', '-150px' );
          }
      });
  
  //also tried the below
  
      $(window).on("scroll", function() {
          var scrollHeight = $(document).height();
          var scrollPosition = $(window).height() + $(window).scrollTop();
          if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
              // when scroll to bottom of the page
              alert('bottom');
          } else {
                  $( '#line' ).css( 'height', $(window).scrollTop() );
                  $( '#arrow' ).css( 'top', $(window).scrollTop() );      
          }
      });
  </code></pre>