html当滚动到特定位置出现或隐藏

HTML代码

<div style="height:300px;background-color: #B15F5F"></div>
<div style="height:100px;background-color: #619A51" id="demo">当滚到到这个div，隐藏下面的按钮</div>
<div style="height:300px;background-color: #645FB1" ></div>
<div style="height:200px;background-color: #F18733"></div>
<a href="javascript:;" class="box" id="btn">按钮</a>

CSS 代码

<style type="text/css">
.box{ display: block;  height: 50px; line-height: 50px;text-align: center; border:1px solid #ccc; border-radius: 20px; background-color: #ddd; margin-top: 30px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9 }
</style>

JQ代码

<script type="text/javascript">
    $(function(){
        var demoHeight = $("#demo").offset().top;
        window.onscroll=function(){
            var this_scrollTop = $(this).scrollTop();
            if(this_scrollTop>demoHeight ){
                $("#btn").hide();
            }else{
                $("#btn").show();
            }
        };
    });
</script>