Is there a way to transition the position of sticky content from sticky to Fixed while scrolling down and moving to the next rows, keeping it fixed until just before the footer, where it should scroll again?
For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test Page</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
...
</div>
<div class="container py-5 mb-5">
...
</div>
<div class="container-fluid border-top py-5">
...
</div>
<!-- Site footer -->
...
</div>
</body>
</html>
I have created an Example Fiddle.
In this example, there is a sticky block on the right side of the screen. I want to achieve a similar effect.
Update***
I have successfully changed the position from sticky to fixed while scrolling. However, the issue now is that I need to change its position from fixed to sticky just before the footer appears, as it is currently overlapping the footer.
<script>
$(window).scroll(function() {
if ($(window).scrollTop() >= 330) {
$('#pricesticky').addClass('position-fixed mt-n51');
$('#pricesticky').removeClass('sticky-top mt-n17');
} else {
$('#pricesticky').removeClass('position-fixed mt-n51');
$('#pricesticky').addClass('sticky-top mt-n17');
}
});
</script>