当滚动条下拉时,悬浮框位置不变,主要是 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. iphone Dev 开发实例8: Parsing an RSS Feed Using NSXMLParser

    From : http://useyourloaf.com/blog/2010/10/16/parsing-an-rss-feed-using-nsxmlparser.html Structure o ...

  2. 基于List集合映射

    1. 实体类中使用List集合 public class Grade { private int id; private String name; private List<Student> ...

  3. Scala第三章学习笔记

    换行后的左大括号造成的问题: class FooHolder { def foo() { println("foo was called") } } Scala认为def foo( ...

  4. [实变函数]5.6 Lebesgue 积分的几何意义 $\bullet$ Fubini 定理

    1 本节推广数学分析中的 Fubini 定理. 为此, 先引入 (1)(从低到高) 对 $A\subset \bbR^p, B\subset\bbR^q$, $$\bex A\times B=\sed ...

  5. 转--Android如何在java代码中设置margin

    ========  3 在Java代码里设置button的margin(外边距)? 1.获取按钮的LayoutParams LinearLayout.LayoutParams layoutParams ...

  6. js 倒计时(转)

    第一个(毫秒级): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. rman异机恢复(RAC双节点恢复到单节点)

    一.数据库全备 RUN {ALLOCATE CHANNEL ch00 DEVICE TYPE disk;ALLOCATE CHANNEL ch01 DEVICE TYPE disk;backup as ...

  8. [POJ 3211] Washing Clothes (动态规划)

    题目链接:http://poj.org/problem?id=3211 题意:有M件衣服,每种衣服有一种颜色,一共有N种颜色.现在两个人洗衣服,规则是必须把这一种颜色的衣服全部洗完才能去洗下一种颜色的 ...

  9. memcpy、memmove、memset

    void * memcpy(void * dst, const void * src, size_t count) { void *res=dst; while (count--) { *(char* ...

  10. uva 11488 Hyper Prefix Sets(狂水)

    题意: 获得集合中最长前缀长度*有该前缀个数的最大值 Prefix goodness of a set string is length of longest common prefix*number ...