Stop fixed background image from scrolling at a certain height

Question

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>

Answer 1

Absolute image child solution

Here is how i would solve this problem:
First change the background-image to be a normal image inside the content you wish to be scrolled.
Then relative position its parent, and absolute position the banner (image).
Now we can control its scrolling by effecting its top property.
The javascript code checks if the banner is inside its parent container and does not add any more scrolling when the scroll goes beyond that container.

$(document).ready(function() {
  $image = $('.image');
  $(window).scroll(function() {
    if ($(window).scrollTop() < $(".content").height() - $image.height()) {
      $image.css('top', $(window).scrollTop());
    }
  });
});

body {
  margin-left: 100px;
}
.content {
  position: relative;
  padding-left: 50px;
  height: 1000px;
  background-color: #999;
  margin-bottom: 15px;
}
.end {
  height: 100px;
  background-color: black;
}
.image {
  position: absolute;
  top: 0;
  left: -30px;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,</p>
  <svg class="image" viewBox="0 0 100 100">
    <path fill="blue" d="m0,10 5,-5
             v80
             l-10,-10" />
    <path fill="#07c" d="m0,10 35,5 
                                        c5,0 5,10 5,10
                                        v40
                                        c0,10 -5,10 -5,10
                                        l-35,5Z" />

  </svg>
</div>
<footer class="end">

</footer>