Fork me on GitHub

滚动事件显示/隐藏模块

描述:

    滚动界面,当滚到到达某个位置,你需要让某个模块固定在顶部或者底部,然后再你滚动回去后,那个模块恢复原来的模样。

代码如下:

 

JS:

<script>
$("body").scroll(function() {               // body滚动事件
var BMapHeight = -$(".BMap_mask").height();
var topHeight = $("#scrollEvent").offset().top;      // 你需要的div的位置
if (topHeight == BMapHeight) {                            // 到达某个特定的点触发事件
$("#allmap").hide();
$(".resetPoint").hide();
$("#newScrollEvent").css("position","fixed");
$("#newScrollEvent").css("width","100%");
$("#newScrollEvent").css("background-color","#ffffff");
$("#newScrollEvent").css("z-index","1011");
$("#newScrollEvent").css("border-bottom","1px solid #eeeeee");
}
if(1<topHeight<10){                                        // 恢复原来的模样
$("#allmap").show();
$(".resetPoint").show();
$("#newScrollEvent").css("position","relative");
$("#newScrollEvent").css("width","100%");
$("#newScrollEvent").css("background-color","#ffffff");
$("#newScrollEvent").css("border-bottom","1px solid #eeeeee");
}
});
</script>

以上代码只有js,提供思路,希望对你有帮助

posted @ 2017-07-27 11:48  广东靓仔-啊锋  阅读(548)  评论(0编辑  收藏  举报