<!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. How to generate UML Diagrams from Java code in Eclipse

    UML diagrams compliment inline documentation ( javadoc ) and allow to better explore / understand a ...

  2. ubuntu下mysql使用方法

    连接mysql的命令为: mysql -u root(用户名) -p 使用 mysqladmin 命令行 修改 用户名密码的方式.最正确的格式如下: mysqladmin -u root -p pas ...

  3. iOS应用动态部署方案

    iOS的动态部署能极大的节约成本.苹果的审核周期很长,有的时候,你可能不得不等待将近2个星期去上架你的新功能或者bug.所以动态部署是有价值的. 我这里讨论的情况不把纯web应用考虑在内,因为用户体验 ...

  4. Proj.4库的编译及使用

    Proj.4库的编译及使用 Proj.4是开源GIS最著名的地图投影库,GRASS GIS, MapServer, PostGIS, Thuban, OGDI, Mapnik, TopoCad, GD ...

  5. 【krpano】krpano xml资源解密（破解）软件说明与下载（v1.3）

    欢迎加入qq群551278936讨论krpano技术以及获取最新软件.   该软件已经不再维护,现在已经被KRPano资源分析工具取代,详情参见 http://www.cnblogs.com/reac ...

  6. 【krpano】krpano xml资源解密（破解）软件说明与下载

    欢迎加入qq群551278936讨论krpano技术以及获取最新软件.   最新版本软件下载:http://www.cnblogs.com/reachteam/p/5455675.html 该软件已经 ...

  7. Outlook~设置

    outlook2013 中帐户设置无法直接更改邮件投递位置到本地的.pst文件,“更改文件夹”选项已经删除. Exchange 传递到 Outlook 数据文件 (.pst) 升级到 Outlook ...

  8. JavaScript和JQuery好书推荐

    其实无论你是php/python/java还是c/c++,只会自己那点知识是无法独立完成一个站点的建设的! 如果你因自己能力不足拒绝过几次亲友的建站请求,或者因合作中不了解前端是什么东西而失去过几次创 ...

  9. 【python】继承关系和isinstance

    来源:廖雪峰 继承关系是: object -> Animal -> Dog -> Husky 那么,isinstance()就可以告诉我们,一个对象是否是某种类型.先创建3种类型的对 ...

  10. [Android Pro] android控件ListView顶部或者底部也显示分割线

    reference to  :  http://blog.csdn.net/lovexieyuan520/article/details/50846569 在默认的Android控件ListView在 ...