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

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

今天有个新功能开发，就是类似淘宝的购物车页面的那个浮动层，其实那种浮动效果很常见，京东什么的很多网站都用了。

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

看代码吧：

JS代码如下：

/**
 * 页面底部浮动层
 *
 * @param 
 * @arrange (512.笔记) www.q1010.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>

// 来自：四海网（www.q1010.com）

本文来自：http://www.q1010.com/174/2077-0.html

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

关键词：浮动层