calculate positioning of image to follow scroller

Question

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.

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.

I have tried different variations of this code but none work. Can anyone help?

//Draw dotted line on scroll - works to certain extent but scrolls off page
    $( window ).scroll(function() {
        if ( $.windowScrollTop() > 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() );      
        }
    });

Answer 1

What we are trying to do here is reflect the document height into an element of window height. So the actual scrollable document height will be

    var actualScrollHeight = $(document).height() - $(window).height();
    /* This is the distance we actually scroll */

And our #line will have a maximum possible height of

    var lineMaxHeight = $(window).height() - topMargin - bottomMargin - arrowHeight;
    /* #arrow is inside #line but we positioned it outside it's height */

No to reflect the scroll progress in #line elements height what we need to do is

    var lineHeight = $(document).scrollTop() / actualScrollHeight * lineMaxHeight;
    /* Super Easy, isn't it? */

The Final Result:

You don't need to position both the #line and #arrow. Fix the #arrow at the bottom of #line and then just changing the height of #line works just fine. I added the topMargin and bottomMargin feature making screen adjustment more customizing.

$(function(){
  var topMargin = 15, bottomMargin = 5;
  var arrowHeight = $('#arrow').height();
  var $lineElement = $('#line');
  $lineElement.height(topMargin);
  $(window).scroll(function() {
    var winHeight = $(window).height();
    var actualScrollHeight = $(document).height() - winHeight;
    var lineMaxHeight = winHeight - topMargin - bottomMargin - arrowHeight;
    var scrollTop = $(document).scrollTop();
    var lineHeight = scrollTop / actualScrollHeight * lineMaxHeight;
    $lineElement.height(topMargin + lineHeight);
  });
});

#logo {
  width: 80px;
  background-color: #53befd;
  padding: 20px;
}

#line {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAMCAYAAABBV8wuAAAAFklEQVR42mNgoB74OEXzPzY8sBLUAwB6PmBV1D+CIAAAAABJRU5ErkJggg==);
  position: fixed;
  top: 0px;
  right: 19px;
  z-index: 20;
  width: 3px;
}

#arrow {
  background-color: #f28323;
  height: 40px;
  width: 40px;
  position: absolute;
  bottom: -40px;
  left: -18px;
  border-radius: 20px;
  color: white;
  text-align: center;
  font-size: 32px;
  line-height: 35px;
  padding-top: 3px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">LOGO </div>
<p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p><p>  Page content go here<br /> and here<br /> and here<br /> and here<br /> and here</p>
<div id="line"><div id="arrow">V</div></div>