How to make a section sticky when scrolled section to top?

We can make a section fixed or sticky while scrolling the section reached to top. It’s very simple in jquery. Here is how to make a section sticky.

HTML

Suppose we have a section in middle of a website page and we want to make this section sticky while reached to top.

<!--card start-->
<div class="card mb-3 shadow" id="profile-menu">
    <ul class="list-inline">
	<li class="list-inline-item border-right p-2"><a class="text-dark overview-btn" href="#0overview">Overview</a></li>
	<li class="list-inline-item border-right p-2"><a class="text-dark availability-btn" href="#0availability">Availability</a></li>
	<li class="list-inline-item border-right p-2"><a class="text-dark feedback-btn" href="#0feedback">Feedback</a></li>
	<li class="list-inline-item p-2"><a class="text-dark review-btn" href="#0review">Reviews</a></li>
    </ul>
</div>
<!--card end-->

Jquery

<script>
var fixmeTop = $('#profile-menu').offset().top;
$(window).scroll(function() {                  
    var currentScroll = $(window).scrollTop(); 
    if (currentScroll >= fixmeTop) {           
        $('#profile-menu').addClass('sticky');
    } else {                                   
        $('#profile-menu').removeClass('sticky');
    }
});
</script>

CSS

We have added a sticky class to the section in which we want to make sticky or fixed to top while scrolling it to top.

.stikcy{ position:fixed; top:0px; }


note: you can give style in sticky class according to your need.