<!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. linux下实现在程序运行时的函数替换(热补丁)

    声明:以下的代码成果,是参考了网上的injso技术,在本文的最后会给出地址,同时非常感谢injso技术原作者的分享. 但是injso文章中的代码存在一些问题,所以后面出现的代码是经过作者修改和检测的. ...

  2. PAT mooc DataStructure 4-2 SetCollection

    数据结构习题集-4-2 集合的运用 1.题目: We have a network of computers and a list of bi-directional connections. Eac ...

  3. MySQL关键字

    MySQL关键字 ADD ALL ALTER ANALYZE AND AS ASC ASENSITIVE BEFORE BETWEEN BIGINT BINARY BLOB BOTH BY CALL ...

  4. Linux下，如何给PHP安装pdo_mysql扩展

    下载了一个免费开源的广告系统(openadserver),在Linux上安装时,提示要安装 pdo_mysql 扩展,先前有过编译安装 soap扩展 的经历,今天要编译安装 pdo_mysql 扩展, ...

  5. Swift3.0P1 语法指南——控制流

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  6. (备忘)自定义viewgroup与点击分发事件

    public class ScoreButton extends ViewGroup 在类中重写onTouchEvent方法 @Override public boolean onTouchEvent ...

  7. 【GoLang】golang 闭包 closure 参数传递的蹊跷！

    结论: 闭包函数可以直接引用外层代码定义的变量, 但是,注意,闭包函数里面引用的是变量的地址, 当goroutine被调度时,改地址的值才会被传递给goroutine 函数. 介绍 go的闭包是一个很 ...

  8. jQuery UI Datepicker

    http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...

  9. cookie 和session 区别

    会话技术: Cookie:客户端技术.将数据保存在客户端浏览器上.Cookie是有大小和个数的限制. Session:服务器端技术.将数据保存在服务器端.Session没有大小和个数限制.Sessio ...

  10. MySQL学习笔记（1/2）

    数据库的学习要求:1.为项目设计表:2.使用SQL(Structure Query Language)语句(SQL编程).其他的都可以使用工具完成. SQL: DDL:创建库.创建表 DML:对数据的 ...