Solution:
The default behaviour should work. There should be some style issues by which the window’s scroll is being blocked.
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 300) {
jQuery(".cust_sticky_header").addClass('sticky');
} else {
jQuery(".cust_sticky_header").removeClass('sticky');
}
});
.sticky {
position: sticky;
top: 0;
}
.cust_sticky_header {
background: #ff0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cust_sticky_header">Sticky header</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>
<div>Some content to scroll</div>