当滚动条滑到一定距离自动隐藏某个div怎么实现？滑到一定距离会自动给这个div加上display：none

当滚动条滑到一定距离自动隐藏某个div怎么实现？滑到一定距离会自动给这个div加上display：none

---

<script type="text/javascript">

    $(window).scroll( function() {
        if(window.document.body.scrollTop>=500){
            document.getElementById("top_bar").style.display = "none";
        }
        else{
            document.getElementById("top_bar").style.display = "block";
        }
    } );
</script>
<div class="top_bar" id="top_bar"></div>