Sticky header for my table in Angular 5

I'm trying to implement a sticky header for my table in Angular 5.

these are the links I reffered. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

I need something similar to this but my usage is I'm placing the scrollable content in a Scrollable div. hence my on scroll values remain same they wont change. I'm able to trigger the onscroll event

`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="body">
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
<a class="active" href="javascript:void(0)">Home</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.
</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

var navbar1 = document.getElementsByClassName("body");
var sticky1 = navbar1[0].offsetTop;

function myFunction() {
console.log("01 --> " + sticky1);
console.log("02 --> " + window.pageYOffset);
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>

</body>
</html>`


this is how my code is.

I used this link to convert the JS code to NG2

How to handle window scroll event in Angular 4?

Continue reading...