JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollMe" ng-app="app" scroll>
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS

#header {
    height: 150px;
    background-color: red
}
#content {
    height: 5000px;
}
#scrollMe {
    height: 200px;
    overflow: scroll;
    background-color: green;
}
.scrolled {
    background-color: blue !important;
    height: 100px !important
}

JavaScript

angular.module("app", []);
angular.module("app").directive("scroll", function () {
    return {
        link: function (scope, element) {
            element[0].addEventListener("scroll",function (event) {
                var header = document.getElementById("header"),
                    body = document.getElementById("scrollMe");
                console.log(body.scrollTop, header, header.offsetHeight);
                
                
                if (body.scrollTop > header.offsetHeight) {
                    body.classList.add("scrolled");
                } else {
                    body.classList.remove("scrolled");
                }
            });
        }
    }
});