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>
