<!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. UIScrollView的常见属性

    @property(nonatomic) CGPoint contentOffset; 这个属性用来表示UIScrollView滚动的位置 (其实就是内容左上角与scrollView左上角的间距值) ...

  2. GitHub使用教程

    一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业.Cop ...

  3. 学习 opencv---(2) 图像的载入，显示和输出

    了解过之前老版本OpenCV的童鞋们都应该清楚,对于OpenCV1.0时代的基于 C 语言接口而建的图像存储格式IplImage*,如果在退出前忘记release掉的话,就会照成内存泄露.而且用起来超 ...

  4. python返回值与局部全局变量

    Python 2.7.10 (default, Oct 14 2015, 16:09:02) [GCC 5.2.1 20151010] on linux2 Type "copyright&q ...

  5. python 多个 %s 例子

    input = , ) input 为: '{"a" : 1234, "b" : "14289", "c": " ...

  6. Apache curator-client详解

    Apache curator框架中curator-client组件可以作为zookeeper client来使用,它提供了zk实例创建/重连机制等,简单便捷.不过直接使用curator-client并 ...

  7. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  8. Outlook~设置

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

  9. Swift - 设置tableView每个分区cell圆角

    1.// 重新绘制cell边框 func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRow ...

  10. request getParameter getAttribute

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