addclass的转换仅在第一次

Question

我基本上在页面顶部有一些社交媒体图标，后来变得固定。

我希望它们淡入淡出，我正在使用CSS。我尝试使用JS的所有东西都做了同样的事情或者没有工作。

这是我的JS：

jQuery(document).scroll(function() {
    var y = jQuery(document).scrollTop(), //get page y value
            social = jQuery(".socialnetworks"),
            headerHeight = jQuery(".bg-cover").height();
        if(y >= headerHeight + 500)  {
            social.css({opacity : 0});
            social.addClass("fixedsocialnetworks");
        } else {
          social.removeClass("fixedsocialnetworks");
        }

});

我的CSS

.fixedsocialnetworks {
    position: fixed!important;
    top: 200px!important;
    z-index:10;
    left:30px;
    opacity:1!important;
     transition: opacity 400ms;
}

所以我将不透明度设置为0，然后添加一个将不透明度设置为1的类，并进行转换。

所以它有效，但它第一次在滚动时没有工作，它在第一次之后每隔一段时间就有效。为什么？我该如何解决这个问题？