滚动事件显示/隐藏模块
描述:
滚动界面,当滚到到达某个位置,你需要让某个模块固定在顶部或者底部,然后再你滚动回去后,那个模块恢复原来的模样。
代码如下:
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,提供思路,希望对你有帮助
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步