<!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. Unix/Linux进程间通信（一）：概述

    序 Linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的.而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在进 ...

  2. .net WebServer例

    新建.asmx页面 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  3. 超简单，安卓模拟器手动root

    本文转载自:http://quantoubao.blog.163.com/blog/static/2083211702013870501987/ 安装Android SDK安卓模拟器的方法很简单,网上 ...

  4. jquery----常用的函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JQuery 菜鸟笔记(一)

    什么是JQuery JQuery是一个优秀的javascript类库,jQuery以其简洁.快速等优点征服了众多javascript开发者.jQuery使用户能更方便地处理DOM.events.实现动 ...

  6. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  7. [PHP][位转换积累]之与运算截取二进制流的值

    function getBit( $num, $bit, $mask ){ return $num>>$bit&$mask; } var_dump( getBit( 41, 3, ...

  8. iOS compare 字符串比较

    NSString 比较字符串,我介绍一些常用的方法: NSString *value = @"1234567890"; 比较的方法: [value compare:(NSStrin ...

  9. vbox中虚拟ubuntu增加新的虚拟硬盘

    vbox中虚拟ubuntu增加新的虚拟硬盘   在virtualbox中装好Ubuntu后,发现硬盘空间不够使用 了.以下是搜集整理的解决办法:   1. 添加新硬盘        设置 -> ...

  10. [mysql]数据库基础知识

    数据库管理系统DBMS 软件 bin config db (保存数据) 写程序: 数据库在本地 找到目录 添加数据 数据库在远程 socket连接上远程机器 socket发送命令 需要做的事情 程序 ...