스크롤(scroll)시 head/상단에 class 추가

<script type="text/javascript">
$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 0) {
            $("#header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $("#header").removeClass("active");
        }
    });
});
</script>

 

---

 

100vh 스크롤했을때 클래스 추가

<script type="text/javascript">
$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > vh(100)) {
            $("#header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $("#header").removeClass("active");
        }
    });
});
</script>