代码主体及说明

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. Nginx优化—配置优化

    完整配置如下所示: user nginx; #运行的用户 pid /var/run/nginx.pid; worker_processes auto; #定义了nginx对外提供web服务时的word ...

  2. http方式的联调经验

    这近在做一个项目,现在刚与厂家做联调.我的系统是windows2008,他的测试机是unix,他本机是XP的.本来用httppost方式给他本机发送中文数据是正常的,但是发送到他的unix上,中文就变 ...

  3. eclipse-android-activity_main/fragment_main文件处理

    android新建工程后,在res/layout/下有两个文件,之前用studio的时候貌似没有,只有一个文件,然后再测试Activity切换的时候,一直在纠结这个问题,下面是解决方法: 1)将fra ...

  4. java多线程心得

    多并发的时候,在什么情况下必须加锁?如果不加锁会产生什么样的后果. 加锁的场景跟java的new thread和Runnable的关系是什么? 看看java的concurrentMap源码. 还有sp ...

  5. JavaScript 客户端JavaScript之 Web浏览器的环境

    Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容)  Web浏览器中的Javascrip ...

  6. codeforces 672 D

    题目链接:http://codeforces.com/problemset/problem/672/D 题目大意:进行k次操作,每次将最大值集合中最大值-1,最小值+1,问你K次操作之后,最大值和最小 ...

  7. Dev-C++程序正确闪退问题

    只需要在主函数最后一句语句上面加一句getchar();即可

  8. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  9. MySQL单列索引和组合索引的区别介绍

    MySQL单列索引和组合索引的区别介绍 作者:佚名出处:IT专家网2010-11-22 13:05 MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引的区别可能有 ...

  10. haslayout和BFC

    感谢CSS涛的分享,参考文章: (1)haslayout:http://aibusy.com/blog/?p=53 (2)BFC 神奇背后的原理:http://aibusy.com/blog/?p=8 ...