滚动事件显示/隐藏模块

Posted 2020-09-30 前端开发-阿锋

描述：

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

代码如下：

 

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，提供思路，希望对你有帮助