JavaScript 页面底部浮动层的简单示例

这篇文章主要为大家详细介绍了JavaScript 页面底部浮动层的简单示例，具有一定的参考价值，可以用来参考一下。

因为最近一直在复习源生js所以这次就不用jq来写了，那个效果其实很简单，算好元素到窗口的顶部距离和窗口的高度来判断层是否要浮动；

看代码吧：

/**
 * 页面底部浮动层
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
<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>

// 来自：512笔记（www.512pic.com）

注：关于JavaScript 页面底部浮动层的简单示例的内容就先介绍到这里，更多相关文章的可以留意