Javascript 如何在wordpress中使元素在向下滚动时隐藏

我需要在向下滚动页面时隐藏搜索栏

我知道这是在jquery中完成的，但我真的不知道从哪里开始。我不知道我需要的代码以及如何/在哪里正确地将其包含在Wordpress中

就在这里

有人能帮忙吗

多谢各位

<script>
//when user start scrolling
jQuery(document).on("scroll", function () {
    //hide search bar
    jQuery('.header .search').removeClass('animated');
    jQuery('.header-cont').removeClass('search-active');
});
</script>

将此代码放在HTML页面的底部应该是ok

someid-target

300-表示顶部偏移px

可见-默认情况下删除或添加类并隐藏目标

或反向-添加另一个隐藏滚动元素的类

var foo = function() {
    var arrow = document.getElementById('someid');
    window.document.addEventListener('scroll', function() {
        var topOffset = document.documentElement.scrollTop || document.body.scrollTop;
        topOffset > 300 ? arrow.classList.add('visible') : arrow.classList.remove('visible');
    });
};
foo();

---

您好，冻糕非常感谢您的回答，我已经在我的网页的html中添加了这个，但我担心它不起作用。考虑到我正试图将脚本加载到wordpress中，我需要对脚本做什么具体的处理吗？再次感谢您将“$”替换为“jQuery”。感谢冻糕，仍然没有变化。我显然做错了什么，但是afaik jquery脚本需要在wordpress中排队才能工作。