Html sticky header on scroll up and remove

Html sticky Header

<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>

CSS

#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}

Javascript

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

Remove the sticky when find out the particular ID

Add after some content

HTML

<div  id="remover"><h1> Remove from Here </h1></div>

 

CSS

.stickremover{position:relative !important;}

Javascript

$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
$('.stick').toggleClass('stickremover',
//add 'ok' class when div position match or exceeds else remove the 'ok' class.
scroll >= $('#remover').offset().top
);
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed