So erstellen Sie einen Abschnitt, der beim Scrollen fixiert ist, und scrollen Sie mit der Fußzeile nach oben

Ich habe dieses Problem für mehrere Projekte abgerufen. Ich versuche, die Lösung auf StackOverflow zu finden, aber es gibt zwei Teile

auf der Schriftrolle behoben

Scrollen Sie mit der Fußzeile nach oben

und schließlich finden Sie es heraus und versuchen Sie es zu teilen.

hoffe es hilft anderen.

<div class="col-md-5 offset-md-1">
 <div id="listing_preview">
...
 </div>
</div>

Fusszeile

<footer class="p-5 footer">
....
</footer>

Lösung des Problems

Ich recherchiere dieses Problem und finde diese Lösung heraus. CSS

<style>
div.sticky {
 position: fixed;
 top: 50px;
}
</style>

<script>
 window.onscroll = function() {myFunction()};
 
 var product_preview = document.getElementById("listing_preview");
 var sticky = product_preview.offsetTop;
 
 function myFunction() {
 if (window.pageYOffset > sticky +100) {
 product_preview.classList.add("sticky");
 } else {
 product_preview.classList.remove("sticky");
 }
 }
var originalBottom = 30; // get this depending on your circumstances
var footerHeight = $('.footer').height() // get this depending on your circumstances
$(window).scroll(function () { // start to scroll
 // calculating the distance from bottom
 var distanceToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
 if (distanceToBottom <= footerHeight) // when reaching the footer
 $("#listing_preview").css('top', '-'+ (footerHeight - distanceToBottom) + 'px');
 else // when distancing from the footer
 $("#listing_preview").css('top', originalBottom + 'px'); 
 // only need to specify 'px' (or other unit) if the number is not 0
});
</script>