滚动时更改标题颜色

Question

当div #site-header接近页面顶部时，我正在尝试使元素#primary更改背景颜色。我是通过使用以下代码将.white-head类添加到#primary来实现此目的

$(window).scroll(function(){
    if($(window).scrollTop() > $("#primary").offset().top) {
        $('#site-header').addClass('white-head');
    } else {
        $('#site-header').removeClass('white-head');
    }
});

我已经超过了代码1000000次并且不能为我的生活找出原因，为什么这个也不起作用？

这是CSS：

.white-head {
    background: white!important;
}
#site-header {
    width: 100%;
    background: transparent;
    color: white;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 9999;
}