页面滚动时导航栏固定（增加class）？我这段代码咋就不行呢？css没有问题

Question

css已经设置好没问题，审查元素手动在#head-navbar的class里增加bg-header-fixed后效果没有问题。
就是不知道这个js代码该怎么弄了，就是不对，应该是页面滚动10就会增加class，可是没有效果。
请教哪位能根据这个代码，用最简短的代码给改下。搜索了好长时间也没弄成。谢谢

$(document).ready(function () {
    var navtop = $("head-navbar").offset().top;
    $(window).scrollTop(function () {
        var t = $(window).scrollTop();
        if (t > navtop) {
            $("head-navbar").addClass("bg-header-fixed");
        } else {
            $("head-navbar").removeClass("bg-header-fixed");
        }
    })
});

谢谢

Answer 1

//第三行写错了  应该是监听scroll事件 ，而不是scrollTop
$(document).ready(function () {
    var navtop = $("head-navbar").offset().top;
    $(window).scroll(function () {
        var t = $(window).scrollTop();
        if (t > navtop) {
            $("head-navbar").addClass("bg-header-fixed");
        } else {
            $("head-navbar").removeClass("bg-header-fixed");
        }
    })
});

Answer 2

附上经过@nightire 指点后小白我亲测可用代码，相关CSS样式设置仅供参考。

/*
 页面滚动时导航栏固定（增加class）
 */
<script>
$(document).ready(function () {
    $(window).on('scroll', function () {
        var t = $(window).scrollTop();
        if (t > 10) {
            $("#head-navbar").addClass("bg-header-fixed");
        } else {
            $("#head-navbar").removeClass("bg-header-fixed");
        }
    })
});
</script>

<style>
.bg-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: rgba(216, 214, 176, 0.9) !important;
}
</style>