Arresta l'immagine di sfondo fissata dallo scorrimento ad una certa altezza

Question

Come mostrato nell'immagine sotto, la barra laterale va sotto il suo involucro. Come faccio a interrompere l'immagine di sfondo fissa dallo scorrimento se scende sotto il wrapper? Non voglio che tocchi il piè di pagina.

Qui sono i miei codici:

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

Codici HTML:

<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

dovete inserire contenuti & la navigazione barra laterale in un contenitore e impostare la posizione del contenuto relativo. È possibile utilizzare il plugin stickem per aiutare con lo scorrimento. Un esempio è la seguente:

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

soluzione assoluta bambino immagine

Ecco come risolverei questo problema:
Prima modifica l'immagine di sfondo in modo che sia un'immagine normale all'interno del contenuto che desideri scorrere.
Quindi posiziona il relativo genitore e posiziona in modo assoluto il banner (immagine).
Ora possiamo controllarne lo scorrimento effettuando la sua proprietà superiore.
Il codice javascript controlla se il banner si trova all'interno del contenitore principale e non aggiunge ulteriori scrolling quando lo scroll va oltre quel contenitore.

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