js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 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实现页面悬浮框的更多相关文章
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
- 菜鸟学JS(三)——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- (41)JS运动之右側中间悬浮框(对联悬浮框)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- Echarts地图悬浮框显示多组series数据以及修改地图大小
1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...
随机推荐
- 2014 年10个最佳的PHP图像操作库
2014 年10个最佳的PHP图像操作库 Thomas Boutell 以及众多的开发者创造了以GD图形库闻名的一个图形软件库,用于动态的图形计算. GD提供了对于诸如C, Perl, Pytho ...
- iphone Dev 开发实例10:How To Add a Slide-out Sidebar Menu in Your Apps
Creating the Xcode Project With a basic idea about what we’ll build, let’s move on. You can create t ...
- (WPF) MVVM: DataGrid Binding
Binding到DataGrid的时候,需要用到ObservableCollection. public ObservableCollection<Customer> Customers ...
- [Java A] – is not an enclosing class
public class A {public class B { }}; 需要实例B类时,按照正逻辑是,A.B ab = new A.B();那么编译器就会出现一个错误–“is not an encl ...
- Java注解教程:自定义注解示例,利用反射进行解析
Java注解能够提供代码的相关信息,同时对于所注解的代码结构又没有直接影响.在这篇教程中,我们将学习Java注解,如何编写自定义注解,注解的使用,以及如何使用反射解析注解. 注解是Java 1.5引入 ...
- JavaScript判断字符串是否含有中文(实用)
引用页: http://javasam.iteye.com/blog/1465048 UTF-8有点类似于Haffman编码,它将Unicode编码为:0x00-0x7F的字符,用单个字节来表示:0x ...
- Mongo 备份 还原
表还原 mongorestore --collection Inquiry0315 -d Estate --drop --dir D:/backup/20150731/Estate/Inquiry.b ...
- maven项目导入报错
极大可能是仓库设置问题
- LeetCode 67. Add Binary
Given two binary strings, return their sum (also a binary string). For example,a = "11"b = ...
- 2013年山东省第四届ACM大学生程序设计竞赛-最后一道大水题:Contest Print Server
点击打开链接 2226: Contest Print Server Time Limit: 1 Sec Memory Limit: 128 MB Submit: 53 Solved: 18 [Su ...