title: Stop fixed background image from scrolling at a certain height
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/vO3JA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vO3JA.png" alt="enter image description here"></a></p>
  
  <p>Here are my codes :</p>
  
  <pre><code> &lt;script&gt;
      $(function () {
  
          //Sidebar navigation
  
          var scrollNavTop = $('.scroll').offset().top;
  
  
          $(window).scroll(function () {
              if ($(window).scrollTop() &gt; scrollNavTop) {
              $('.scroll').css({ position: 'fixed', top: '0px' });
              } else {
  
                      $('.scroll').css({ position: 'relative', top: '0px' });
  
              }
  
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML Codes :</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
  &lt;%--      SMOOTH SCROLL--%&gt;
            &lt;div class="scroll"&gt;
                &lt;div style="margin:0 auto;"&gt;
            &lt;div style="background-image:url(image/scrolltopNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;div class="subpage-header"&gt;
                    &lt;div class="nav-section1"&gt;&lt;a class="link" href="#section1"&gt;&lt;p style="padding-left:50px;"&gt;COMPANY&lt;br /&gt;BACKGROUND&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="nav-section2"&gt;&lt;a class="link" href="#section2"&gt;&lt;p style="padding-left:50px;"&gt;COMPANY&lt;br /&gt;VALUES&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="nav-section3"&gt;&lt;a class="link" href="#section3"&gt;&lt;p style="padding-left:50px;"&gt;OUR&lt;br /&gt;SERVICES&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div style="margin:0 auto;"&gt;
                &lt;div style="background-image:url(image/scrollbottomNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p></p>