代码主体及说明

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. js设置元素的onclick传参方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  2. Lesson 4: Know Your Tools

    Lesson 4: Know Your Tools "差劲的人

  3. c-100米球反弹

    #include <iostream> #define TIMES 10 int main(void) { ; ; //第一次反弹的高度. ; i <= TIMES; i++) { ...

  4. 反序列化 DateTime对象问题

      今天在Android的Json反序列化过程中,Date类型无法转化成自己想要的格式,鉴于之前在C#的反序列话中也遇到过这个问题,解决的同时,顺手做个总结,供自己及需要的人日后查阅.       将 ...

  5. 动态脚本，在js里面又写js

    不知道怎么回事 代码测试不过 var a=document.createElement("script"); a.type="text/javascript"; ...

  6. C++拾遗（九）类与动态内存分配(1)

    创建类时编译器自动生成以下成员函数(如果用户没有定义): 1.默认构造函数 2.拷贝构造函数 3.赋值操作符 4.默认析构函数 5.地址操作符 以下一一说明: 构造函数 构造函数在创建对象时被调用. ...

  7. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  8. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

  9. javascript 不用ajax 用 iframe 子域名下做到ajax post数据

    最近在一个项目中遇到了ajax跨域的问题,情况如下.有三个域名分别是 a.xx.com b.xx.com c.xx.com 这三个域名都会用用ajax post方式相互读取数据.文笔不好, 不写了妈蛋 ...

  10. JQuery+Js 获取浏览器高度和宽度

    JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(docum ...