Javascript 如何延迟我的浮动共享条直到用户向下滚动页面

我已经阅读了这里的一些教程，但仍然无法解决我的问题，因此我发布了这篇文章

我想知道你是否可以告诉我如何让我的浮动共享条@仅在用户向下滚动页面100像素或在文章中滚动到一半时才显示

以下是我的共享栏css：

#search_bar {
    z-index: 1000;
    position: fixed !important;
    top: 0;
    width: 1082px;
    color: #FFF;
    background: #333;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

很抱歉，我无法粘贴共享条形码，因为它一直在这里消失

---

我是一个使用javascript和jquery的新手，所以复制和粘贴解决方案将非常受欢迎。

它消失了吗？请将其粘贴在或类似的网站上，并在此处发布链接。我们会把它贴在这里的。给你，朱克。。。看见below@Madara：谢谢。这里是共享条形码的链接：谢谢你的代码，但我如何将其添加到页面？我要把它添加到functions.php还是什么？sharebar代码在我的footer.php中。顺便说一句，我尝试将代码添加到function.php中，但一直出现语法错误。我刚刚发现它必须放在header.php中，它似乎可以工作，但不是100%。当页面第一次加载时，共享栏是可见的，但当我向下滚动时，它会消失，稍后会重新出现。之后，当我滚动回到顶部时，它不会再次显示，直到我像100px一样向下滚动。我猜这是CSS问题，对吗？@udegbumachuks是的，确保共享栏的初始状态显示为：无；：）

$(window).on('scroll', function(){
    if($(window).scrollTop() > 100){ // The '100' can be set to what ever pixel height you want
         $('#search_bar').fadeIn('500'); // This shows the share bar
    }else{
         $('#search_bar').fadeOut('500'); // This hides the share bar
    }
});