Stop the fixed background image from scrolling to a certain height

As shown in the picture below, the sidebar goes below its wrapper. How do I stop the fixed background image from scrolling if it goes below the wrapper? I don't want it to touch the footer.

Here are my codes :

 <script>
    $(function () {

        //Sidebar navigation

        var scrollNavTop = $('.scroll').offset().top;

        $(window).scroll(function () {
            if ($(window).scrollTop() > scrollNavTop) {
            $('.scroll').css({ position: 'fixed', top: '0px' });
            } else {

                    $('.scroll').css({ position: 'relative', top: '0px' });

            }

        });

    });
</script>

HTML Codes :

<div class="wrapper">

<%--      SMOOTH SCROLL--%>
          <div class="scroll">
              <div style="margin:0 auto;">
          <div style="background-image:url(image/scrolltopNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
                  </div>
              <div class="subpage-header">
                  <div class="nav-section1"><a class="link" href="#section1"><p style="padding-left:50px;">COMPANY<br />BACKGROUND</p></a></div>
                  <div class="nav-section2"><a class="link" href="#section2"><p style="padding-left:50px;">COMPANY<br />VALUES</p></a></div>
                  <div class="nav-section3"><a class="link" href="#section3"><p style="padding-left:50px;">OUR<br />SERVICES</p></a></div>
              </div>
              <div style="margin:0 auto;">
              <div style="background-image:url(image/scrollbottomNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
              </div>
          </div>

You have to insert content & your sidebar navigation into a container and set content's position to relative. You can use stickem plugin to help with the scrolling. An example is as follows :

HTML -

<div class="container">
<div class="row stickem-container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="aside stickem">
      I'm gonna be sticky!
    </div>
</div>

.stickem-container {
 position: relative;
}

.stickit {
margin-left: 660px;
position: fixed;
top: 0;
}

.stickit-end {
bottom: 40px;
position: absolute;
right: 0;
}

Javascript -

    <script src="jquery.js"></script>
<script src="jquery.stickem.js"></script>
<script>
    $(document).ready(function () {
        $('.wrapper').stickem();
    });
</script>