码迷,mamicode.com
首页 > 其他好文 > 详细

滚动事件显示/隐藏模块

时间:2017-07-27 12:38:55      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:代码   隐藏   new   ack   otto   恢复   set   原来   固定   

描述:

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

代码如下:

 

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

滚动事件显示/隐藏模块

标签:代码   隐藏   new   ack   otto   恢复   set   原来   固定   

原文地址:http://www.cnblogs.com/cczlovexw/p/7244070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!