代码主体及说明

Javascript部分：

/**

 * @函数名:flexScroll

 * @功能：滚动超出一定高度,指定元素悬浮

 * @两个参数：target_id：目标元素id;topEle:限定滚动高度，超过之后，导航条悬浮

 * @调用方式：e.g.：flexScroll('nav',80);

 * @author:Kevin 2015/8/14

 */

function flexScroll(target_id,topEle){

window.onscroll=function(){

var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

var scrollNav=document.getElementById(target_id);

if(scrollTop>topEle){

	scrollNav.classList.add('slideDown');

	scrollNav.style.position="fixed";

	scrollNav.style.top="0";

}else{

	scrollNav.classList.remove('slideDown');

	scrollNav.style.position="static";

}

}

}

　　

Css动画部分：

  .slideDown {

  -webkit-animation: slideDown .5s linear;

  animation: slideDown .5s linear;

  -webkit-animation-fill-mode: both;

  -moz-animation-fill-mode: both;

  -o-animation-fill-mode: both;

  animation-fill-mode: both;

  }

  @-webkit-keyframes slideDown{

  0%{-webkit-transform:translateY(-2rem)}

  100%{-webkit-transform:translateY(0)}

  }

　　

应用示例

在线演示：http://codepen.io/anon/pen/VLNBgN

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>JavaScript：浮动的导航条</title>

  <style type="text/css">

	  *

	{

		margin: 0;

		padding: 0;

	}

	.content

	{

		width: 640px;

		height: 1800px;

		margin: 0 auto;

		background-color: #f5f5f5;

	}

	.nav

	{

		line-height: 40px;

		width: 640px;

		height: 40px;

		background-color: #333;

	}

	.nav li

	{

		position: relative;

		float: left;

		width: 25%;

		list-style: none;

		text-align: center;

		color: #fff;

	}

	.nav li:after

	{

		content: '';

		display: block;

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		width: 1px;

		height: 20px;

		margin: auto;

		background-color: #999;

	}

	.nav li:last-child:after

	{

		display: none;

	}

	.placehold

	{

		width: 100%;

		height: 80px;

		background-color: red;

	}

	/*动画效果*/

	.slideDown

	{

		-webkit-animation: slideDown .5s linear;

				animation: slideDown .5s linear;

		-webkit-animation-fill-mode: both;

		   -moz-animation-fill-mode: both;

			 -o-animation-fill-mode: both;

				animation-fill-mode: both;

	}

	@-webkit-keyframes slideDown

	{

		0%

		{

			-webkit-transform: translateY(-2rem);

		}

		100%

		{

			-webkit-transform: translateY(0);

		}

	}

  </style>

 </head>

 <body>

<div class="content">

<!--占位-->

<div class="placehold"></div>

<!--代码主体-->

<div class="nav" id="nav">

<ul>

<li>足球</li>

<li>篮球</li>

<li>苹果</li>

<li>芒果</li>

</ul>

</div>

</div>

<script>

function flexScroll(target_id,topEle){

window.onscroll=function(){

var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

var scrollNav=document.getElementById(target_id);

if(scrollTop>topEle){

	scrollNav.classList.add('slideDown');

	scrollNav.style.position="fixed";

	scrollNav.style.top="0";

}else{

	scrollNav.classList.remove('slideDown');

	scrollNav.style.position="static";

}

}

}

//调用

flexScroll('nav',80);

</script>

 </body>

</html>

　　

Javascript:浮动的导航条的更多相关文章

  1. JQuery Mobile+JS实现智能浮动定位导航条

    实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...

  2. Bootstrap系列 -- 41. 带表单的导航条

    有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...

  3. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  4. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  5. 【CSS】 一个简单的导航条

    今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...

  6. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  7. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Bootstrap之导航条

    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...

  9. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

随机推荐

  1. java里面的equals和hashcode的总结

    问题1: java比较两个对象,除了equals,为什么还要重写hashcode方法? 基本类型比较,用==就可以了. 对象比较,equals比较是对象的内存地址,hashcode比较的也是对象的内存 ...

  2. HTTPS 部署简要指南

    许多Web开发者都知道SSL,但常见的情况是SSL没有完整地部署或者没有部署在它应该部署的地方.这篇关于何时及如何部署SSL的简要指南,将帮助你避免大多数常见错误. 要点 如果你有任何机密信息,或者你 ...

  3. (转)ASP.NET 2.0中的partial

    1. 什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个 不同的.cs文件中. 局部类型适用于以下情况: (1) 类型特别大,不宜放 ...

  4. 返回List的分页方法

    cs代码  /// <summary>         /// 处理分页检索存储过程(SQL2005)         /// </summary>         /// & ...

  5. MySQL忘记root密码的解决方案

    在实际操作中忘记MySQL的root密码是一件令人很头痛的事情,不要急以下的文章就是介绍MySQL的root密码忘记的时候解决方案,我们可以对其进行如下的步骤重新设置,以下就是文章的详细内容描述.   ...

  6. 自定义窗口 mfc

    typedef struct _WNDCLASS { UINT style; //制定窗口的类型 WNDPROC lpfnWndProc; int cbClsExtra; //额外的数值 int cb ...

  7. php发送post请求的三种方法示例

    本文分享下php发送post请求的三种方法与示例代码,分别使用curl.file_get_content.fsocket来实现post提交数据,大家做个参考. php发送post请求的三种方法,分别使 ...

  8. 转：40多个关于人脸检测/识别的API、库和软件

    文章来自于:http://blog.jobbole.com/45936/ 自从谷歌眼镜被推出以来,围绕人脸识别,出现了很多争议.我们相信,不管是不是通过智能眼镜,人脸识别将在人与人交往甚至人与物交互中 ...

  9. quartz2.2.1-测试01

    工程列表: (1)web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app versio ...

  10. Eric Pement的单行awk命令收集

    超实用的. awk1line_zh-CN.txt 可惜中文版的网址好像不能访问了.. HANDY ONE-LINE SCRIPTS FOR AWK 30 April 2008 Compiled by ...