代码主体及说明

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. 动态图片 gif

    简介 android不推荐使用gif图片,一般都是png的,对于gif的图片解析比较消耗资源,但是对于一些动态gif图片的播放,如果比较小的话还是可以的,要是大的话,建议还是把gif图片转换成一帧一帧 ...

  2. ASP.NET-FineUI开发实践-9

    用了FineUI有一段时间了,还是分享下我咋改的吧,没想的那么难,我也是从小白来的. 基础是要懂JQ和EXTJS,主要是要懂JQ和EXTJS能干啥,这里有两个网站 http://www.w3schoo ...

  3. N!水题

    //题目是求N!的问题,思路:设定一个整形数组来存放每次计算过后的值 有两个for循环,第一个for循环每次加进一个数 然后在第二个for循环里面计算出此时的阶乘,比如9999,先给出i=2 在第二个 ...

  4. oop实现方法与属性继承

    <script> /*父类 Person*/ function Person(name,age){ this.name=name; this.age=age; } Person.proto ...

  5. Swift语言 代码添加文本输入框 和 占位文本

    //懒加载文本输入框 private lazy var textView: UITextView = { let textView = UITextView() textView.font = UIF ...

  6. iOS9.3 Could not find Developer Disk Image 真机调试错误解决办法

    昨天手机系统升级9.3,到了公司真机测试的时候发现Xcode(7.2.1)报错:Could not find Developer Disk Image , 这是因为我的Xcode7.2中还没有支持9. ...

  7. php学习之路

    1.php拼接字符串+查询 $floor_id = M('house_floor_input')->where($map1)->field('id')->select(); $flo ...

  8. QQ原创表情添加

    有时候与QQ好友聊天时会收到一些自己比较喜欢的原创表情,如果我们想把这些QQ不支持直接保存的原创表情保存到电脑上该怎么做呢?我们以原创表情图片为例简单介绍一下. 首先,先建立一个存放表情图片的文件夹. ...

  9. JSP九大隐式对象

    JSP九大隐式对象 request HttpServletRequest response HttpServletResponse session HttpSession application Se ...

  10. monogdb笔记１

    :db.collection.remove()与db.collection.drop()的比较 插入100万条测试数据 ;i<;i++){ db.tester.insert({-i}) } 进行 ...