Stop fixed background image from scrolling at a specific height

Question

As shown in the figure below, the side panel goes below its wrapper. How to stop a fixed background image from scrolling if it goes below the shell? 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

You must insert content and sidebar navigation into the container and set the position of the content relative to. You can use the stickem plugin to help with 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> 

CSS -

 .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> 

Answer 2

Absolute Image Child Image Solution

Here is how I could solve this problem:
First change the background image as a normal image inside the content you want to scroll through.
Then the relative position of its parent and the absolute position of the banner (image).
Now we can control our scrolling by performing its top property.
The javascript code checks to see if the banner is inside the parent container and does not add more scrolling when scrolling 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>