当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.

当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.div1 {

    height:2000px;

}

.div2 {

    width:%;

    height:35px;

    background-color:#3399FF;

    margin-top:100px;

}

.div2_1{

    position:fixed;

    width:%;

    height:35px;

    z-index:;

    background-color:#3399FF;

    top:0px;

    _position:absolute;

    _bottom:auto;

    _top:expression(eval(document.documentElement.scrollTop));

}

 .div2_2

    {

        display:none;

    }

</style>

<script type="text/javascript">

window.onscroll=function(){

    var t=document.documentElement.scrollTop||document.body.scrollTop;

    var div2=document.getElementById("div2");

    if(t>= ){

        div2.className = "div2_1";

    }else{

        div2.className = "div2";

    }

}

</script>

</head>

<body>

<div class="div1">

    <div id="div2" class="div2"></div>

</div>

</body>

</html>

js实现页面悬浮框的更多相关文章

  1. js右侧悬浮框

    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...

  2. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  3. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  5. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...

  6. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  7. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

  8. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  9. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. activiti自定义流程之自定义表单（三）：表单列表及预览和删除

    注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...

  2. IOS中UIWebView停止加载

    方法一: [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank" ...

  3. memcached应用场景(转)

     memcached最吸引人的地方主要在于它的分布式.分布式对于互联网应用来讲,按照用途基本上可划分为三种方式:分布式计算.分布式存储和两者兼而有之.memcached是分布式存储的一种.我们常见的分 ...

  4. sql中count(*)和count(字段名)区别

    数据测试:见图 sql 语句见分晓: SELECT COUNT(*) c1 ,COUNT(ADDRESS) c2 FROM test 显而易见,count(*)统计的是结果集的总条数,count(字段 ...

  5. 转-TabHost组件(二)（实现底部菜单导航）

    http://www.cnblogs.com/lichenwei/p/3975095.html 上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定 ...

  6. Java 内存泄露

    一.Java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.Java中对象是采用new或者反射的方法创建的,这些对象的创建都是在堆(Hea ...

  7. linux内核设计与实现--从内核出发

    linux内核有两种版本:稳定的和处于开发中的. linux通过一种简单的命名机制来区分稳定的和处于开发中的内核,使用3个或者4个“.”分割的数字来代表不同内核版本. 如:2.6.26.1:第一个数字 ...

  8. 数组排序-冒泡排序-选择排序-插入排序-希尔排序-快速排序-Java实现

    这五种排序算法难度依次增加. 冒泡排序: 第一次将数组相邻两个元素依次比较,然后将大的元素往后移,像冒泡一样,最终最大的元素被移到数组的最末尾. 第二次将数组的前n-1个元素取出,然后相邻两个元素依次 ...

  9. 立体匹配：关于Middlebury提供的源码的简化后的结构

  10. 立体匹配：关于理解middlebury提供的立体匹配代码后的精减

    Middlebury立体匹配源码总结 优化方法 图像可否预处理 代价计算可否采用BT方式 可选代价计算方法 可否代价聚合 可否MinFilter优化原始代价 WTA-Box 可以 可以 AD/SD 可 ...