I am looking for any option to shift position of sticky content from sticky to Fixed while scrolling and moving to next below rows and keep fixed it before the footer, before footer 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">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div class="container py-5 mb-5">
<div class="row">
<div class="col-md-8">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus ligula eget egestas bibendum. Praesent nec nibh turpis. Quisque a elementum velit. Phasellus commodo fermentum tortor, at accumsan tortor placerat nec. Donec fringilla pharetra sem, ac convallis quam tincidunt ac. Mauris eros lacus, mollis quis ligula non, pulvinar cursus mi. Vestibulum ac justo justo. Aenean a neque rutrum, condimentum lacus id, consequat dolor. Curabitur sit amet tortor iaculis, commodo mauris eget, consectetur felis. Vivamus scelerisque auctor lacinia. Nunc lorem orci, fringilla in dui ac, auctor vulputate arcu. Donec scelerisque aliquet ultricies. Integer dui lorem, sollicitudin in lacus vel, hendrerit hendrerit elit. Morbi eu lacus suscipit, lacinia diam non, vestibulum ex.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla mollis eros ac suscipit ullamcorper. Duis nisi orci, mattis vitae urna vel, ultricies dignissim massa. Nullam quis tortor et ligula aliquet tincidunt ut a lacus. Proin aliquam a enim volutpat ornare. Mauris ultrices eros vel nunc mollis, sed cursus elit lobortis. Mauris commodo erat convallis, fringilla dolor nec, auctor mauris. Vivamus ut nisi ut libero ullamcorper egestas. Morbi ullamcorper ac odio vel feugiat. Phasellus mi mi, lobortis varius metus nec, tempor congue ipsum. Vivamus ac felis quam. Sed mauris est, porttitor dictum ipsum at, dapibus finibus libero.
Maecenas sodales elit lectus, nec malesuada neque convallis quis. Curabitur ut mattis metus, egestas ornare nunc. Curabitur lacinia risus sed nulla consequat interdum. Proin faucibus porta consequat. Quisque pulvinar tortor ultrices nisi volutpat, non cursus nibh facilisis. Nulla in ipsum sit amet neque facilisis malesuada quis non mauris. Donec feugiat mauris vel eleifend dignissim. Aliquam varius, ligula vitae dignissim suscipit, elit metus egestas ipsum, at ornare dolor tortor et tellus. Ut a felis consectetur, porttitor diam quis, efficitur elit.
</p>
</div>
<div class="col-md-4">
<div class="sticky-top mt-n17" id="pricesticky">
<div class="card" style="width: 18rem;">
<div class="card-header">
Sticky Item
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid border-top py-5">
<div class="row">
<div class="col-md-8">
<img class="img-responsive" src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt="Chania" style="width:100%">
<img class="img-responsive" src="https://quotiyapa.com/wp-content/uploads/2019/10/cute-couple-image-1024x682.jpg" alt="Chania" style="width:100%">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">Scanfcode.com <i>CODE WANTS TO BE SIMPLE </i> is an initiative to help the upcoming programmers with the code. Scanfcode focuses on providing the most efficient code or snippets as the code wants to be simple. We will help programmers build up concepts in different programming languages that include C, C++, Java, HTML, CSS, Bootstrap, JavaScript, PHP, Android, SQL and Algorithm.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links">
<li><a href="http://scanfcode.com/category/c-language/">C</a></li>
<li><a href="http://scanfcode.com/category/front-end-development/">UI Design</a></li>
<li><a href="http://scanfcode.com/category/back-end-development/">PHP</a></li>
<li><a href="http://scanfcode.com/category/java-programming-language/">Java</a></li>
<li><a href="http://scanfcode.com/category/android/">Android</a></li>
<li><a href="http://scanfcode.com/category/templates/">Templates</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li><a href="http://scanfcode.com/about/">About Us</a></li>
<li><a href="http://scanfcode.com/contact/">Contact Us</a></li>
<li><a href="http://scanfcode.com/contribute-at-scanfcode/">Contribute</a></li>
<li><a href="http://scanfcode.com/privacy-policy/">Privacy Policy</a></li>
<li><a href="http://scanfcode.com/sitemap/">Sitemap</a></li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2017 All Rights Reserved by
<a href="#">Scanfcode</a>.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
i have created thisExample Fiddle
in this, there is sticky block on right side of screen, for that i want to achieve such goal.
Update***
I achieved change of position from sticky to fixed while scrolling. but now the issue is i need to change its position from from fixed to sticky just before footer appears. because its overlapping 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>
