<!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. 10W -python

    计算2 3 4 加运算符 小于30 >>> new=[''.join(('2',op,'3')) for op in ops] >>> print(new) ['2 ...

  2. [Python] 学习笔记之MySQL数据库操作

    1 Python标准数据库接口DB-API介绍 Python标准数据库接口为 Python DB-API,它为开发人员提供了数据库应用编程接口.Python DB-API支持很多种的数据库,你可以选择 ...

  3. CF memsql Start[c]UP 2.0 B

    CF memsql Start[c]UP 2.0 B B. Distributed Join time limit per test 1 second memory limit per test 25 ...

  4. Linux文件（区域）锁函数 -- open()、fcntl()

    一.什么是文件锁定 对于锁这个字,大家一定不会陌生,因为我们生活中就存在着大量的锁,它们各个方面发挥着它的作用,现在世界中的锁的功能都可归结为一句话,就是阻止某些人做某些事,例如,门锁就是阻止除了屋主 ...

  5. HMTL判断ie版本

    html判断IE版本 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> ...

  6. php-css外边距

    css 基本语法  selector{declaration1;declaration2;....delecrationN;} (选择器和一条或多条声明)  选择器为需要改变样式的html元素,每条声 ...

  7. HikariCP

    HiKariCP是数据库连接池的一个后起之秀,号称性能最好,可以完美地PK掉其他连接池. 为何要使用HiKariCP?这要先从BoneCP说起: 什么?不是有C3P0/DBCP这些成熟的数据库连接池吗 ...

  8. sharepoint OWA问题解决

    请检查DNS   检查域名解析   cmd----nslookup---输入IP或者域名(计算机名)可以看到

  9. EL操作 web 对象的常用方法

    11个常见的web对象 pageScope :获得pageContext对象中存的数据 requestScope :获得request对象中存的数据 sessionScope :获得session对象 ...

  10. poj1988_Cube Stacking

    Cube Stacking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 24130   Accepted: 8468 Ca ...