当滚动条下拉时,悬浮框位置不变,主要是 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. C# 理解lock

    本文为转载 .. 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步 ...

  2. Callable和Future

    在并发编程时,一般使用runnable,然后扔给线程池完事,这种情况下不需要线程的结果. 所以run的返回值是void类型. 如果是一个多线程协作程序,比如菲波拉切数列,1,1,2,3,5,8...使 ...

  3. PLSQL_性能优化系列14_Oracle High Water Level高水位分析

    2014-10-04 Created By BaoXinjian 一.摘要 PLSQL_性能优化系列14_Oracle High Water Level高水位分析 高水位线好比水库中储水的水位线,用于 ...

  4. ubuntu修改grub界面默认开机顺序

    终端输入: sudo gedit /etc/default/grub GRUB_DEFAULT代表的就是启动项的顺序,从数字0开始 修改成默认的第几个,就赋值成几就好(顺序从数字0开始) 然后别忘了运 ...

  5. ADO.NET Entity Framework(EF)

    ylbtech-Miscellaneos: ADO.NET Entity Framework(EF) A,返回顶部 1, ADO.NET Entity Framework 是微软以 ADO.NET 为 ...

  6. CAP原则(CAP定理)

    CAP原则又称CAP定理,指的是在一个分布式系统中, Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可得兼. CA ...

  7. Python & MapReduce

    使用Python实现Hadoop MapReduce程序 原文请参考: http://blog.csdn.net/zhaoyl03/article/details/8657031/ 下面只是将mapp ...

  8. ZK框架的分析与应用

    前言:本文是在下的在学习ZK官方文档时整理出来的初稿.本来里面有很多的效果图片和图片代码的.奈何博客园中图片不能粘贴上去,所以感兴趣的筒子们就将就吧.内容中,如有不好的地方,欢迎斧正! ZK框架的分析 ...

  9. 配置FileZilla Ftp服务器

    FileZilla是我比较喜欢用的一款FTP服务端和客户端,主要使用在Windows下,她是一款开源的FTP软件,虽然在某些功能上比不上收费软件Ser-u,但她也是一款非常好用的软件,这里主要说一下这 ...

  10. [Java] java中的异常处理

    Java中的异常类都继承自Throwable类.一个Throwable类的对象都可以抛出(throw). Throwable对象可以分为两组.一组是unchecked异常,异常处理机制往往不用于这组异 ...