Dừng hình nền cố định khi cuộn ở một độ cao nhất định

Question

Như được hiển thị trong hình bên dưới, thanh bên bên dưới trình bao bọc của nó. Làm cách nào để dừng hình nền cố định khi cuộn nếu nó nằm dưới trình bao bọc? Tôi không muốn nó chạm vào chân.

Dưới đây là mã của tôi:

<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

Bạn phải chèn nội dung & navigation sidebar của bạn vào một container và thiết lập vị trí nội dung để tương đối. Bạn có thể sử dụng plugin stickem để trợ giúp cuộn. Một ví dụ là như sau:

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

giải pháp tuyệt đối hình ảnh con

Đây là cách tôi sẽ giải quyết vấn đề này:
Đầu tiên thay đổi hình nền thành một hình ảnh bình thường bên trong nội dung bạn muốn được cuộn.
Sau đó, vị trí tương đối của bố mẹ và vị trí tuyệt đối của biểu ngữ (hình ảnh).
Bây giờ, chúng tôi có thể kiểm soát cuộn bằng cách thực hiện thuộc tính hàng đầu của nó.
Mã javascript kiểm tra xem biểu ngữ có nằm trong vùng chứa chính và không thêm bất kỳ cuộn nào khi cuộn vượt ra ngoài vùng chứa đó.

$(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>