<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

*{
margin: 0;padding: 0;
}
.wrap{
width: 100%;
height: 300px;
position: relative;
}
.wrap .top{
width:80%;
margin:0 auto;
height: 250px;
background: red;
}
.wrap .bottom{
width:80%;
margin:0 auto;
height: 50px;
background: blue;
}
.wrap .fix{
position: fixed;
top: 0;
left: 10%;
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div id="top" class="top"></div>
<div id="bottom" class="bottom"></div>
</div>
<div style="height: 2000px;width: 100%;"></div>
<script>
var wrap,tops,bottom;
window.onload=function(){
wrap=document.getElementById("wrap");
tops=document.getElementById("top");
bottom=document.getElementById("bottom");
document.onscroll=function(){
var scroll=document.body.scrollTop||document.documentElement.scrollTop;
if(scroll>=tops.offsetHeight){
bottom.classList.add("fix");
}
else{
bottom.classList.remove("fix");
}
}
}
</script>
</body>
</html>

javascript平时小例子⑧(导航置顶效果)的更多相关文章

  1. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  3. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  4. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  5. javascript平时小例子④（setInterval使用2）

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

  6. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. javascript平时小例子②（正则表达式验证邮箱）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...

  8. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  9. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

随机推荐

  1. tyvj1098 任务安排

    描述 N个任务排成一个序列在一台机器上等待完成(顺序不得改变),这N个任务被分成若干批,每批包含相邻的若干任务.从时刻0开始,这些任务被分批加工,第i个任务单独完成所需的时间是Ti.在每批任务开始前, ...

  2. HTML页面去缓存

    在页面中写入: 两种写法: 1. <META HTTP-EQUIV="nocache" CONTENT="no-cache"> 2. <HEA ...

  3. Alpha版本冲刺总结——曙光初现

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 项目预期计划 界面设计 androi ...

  4. C和指针 第十三章 习题

    1,1标准输入读入字符,统计各类字符所占百分比 #include <stdio.h> #include <ctype.h> //不可打印字符 int isunprint(int ...

  5. C和指针 第十章 结构和联合 习题

    1. 记账信息结构联合 typedef struct { unsigned int areaNum; unsigned int transNum; unsigned int station; } ph ...

  6. 在OSX和Windows版本Docker上运行GUI程序

    看到很多人在Docker问题区讨论:如何在OS X和Windows的Docker上运行GUI程序, 随手记录几个参考资料: https://github.com/docker/docker/issue ...

  7. PHP学习-链接数据库

    链接数据库文件:conn.php <?php $conn = mysql_connect("localhost:3306","root","us ...

  8. windows Service

    用c#中创建一个windows服务非常简单,与windows服务相关的类都在System.ServiceProcess命名空间下. 每个服务都需要继承自ServiceBase类,并重写相应的启动.暂停 ...

  9. C#中(double)str;与Convert.ToDouble(str);有什么区别

    1. string str = "32323";2. double a = (double)str ;3. double a = Convert.ToDouble(str); 第3 ...

  10. request getParameter getAttribute

    在浏览器地址输入,表示传入一个参数test,值为123 http://localhost:8888/Test/index.jsp?test=123 在index.jsp中尝试使用EL表达式取出,代码如 ...