因为最近一直在复习源生js所以这次就不用jq来写了,那个效果其实很简单,算好元素到窗口的顶部距离和窗口的高度来判断层是否要浮动;
看代码吧:
JS代码如下:
/**
* 页面底部浮动层
*
* @param
* @arrange (512.笔记) jb51.cc
**/
<style type="text/css">
.bottomBox { background-color: #CCC; width:100%; }
.fixed-bottom{ position:fixed; bottom:0; border:#ccc solid 1px; Box-shadow:0px 0px 10px #ccc;}
</style>
<div class="bottomBox" id="bb">我是底部的浮动层,如果浏览器高度或者内容高度大于一屏的时候,我就开始浮动在窗口底部了,效果类似淘宝的购物车页面。</div>
<script>
function fixDown(BoxId){
var Box = document.getElementById(BoxId);
var cn = Box.className;
var bh=Box.offsetTop;
var wh=document.documentElement.clientHeight;//这里为了兼容IE,所以不能用window.innerHeight;
if(bh >= wh){
Box.className = cn + " fixed-bottom";
}else{
Box.className = cn;
}
}
window.onload=function(){fixDown("bb");}
window.onresize=function(){fixDown("bb");}
</script>
// 来自:编程之家 jb51.cc(jb51.cc)
原文链接:https://www.f2er.com/js/527614.html