代码主体及说明

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. 95秀-dialog 进度对话框 实用工具

    工具Util public class DialogUtil {     public static ProgressDialogView progressDialog;     /**      * ...

  2. svg学习笔记

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

  3. java克隆总结

    对象clone,注意基本类型和指针类型.

  4. WCF 接收我服务的 HTTP 响应时发生错误

    错误内容: System.ServiceModel.CommunicationException: 接收对 https://xx.com/xx.svc的 HTTP 响应时发生错误.这可能是由于服务终结 ...

  5. ruby 知识点

    $LOAD_PATH 执行 require 读取文件时搜索的目录名数组,也可以写作 $: 创建 URI 的时候可以直接这样 URI("http://www.dy2018.com/i/9751 ...

  6. 接入淘宝SDK(OneSDK)和支付宝SDK(AlipaySDK)出现 duplicate symbols for architecture i386

    起初我在我的项目中先接入了AlipaySDK,没有出现什么问题,之后想要接入淘宝SDK之后,就出现了duplicate symbols for architecture i386的错误 经过一段时间排 ...

  7. mysql UNIX时间戳与日期的相互转换

    UNIX时间戳转换为日期用函数: FROM_UNIXTIME() select FROM_UNIXTIME(1156219870); 日期转换为UNIX时间戳用函数: UNIX_TIMESTAMP() ...

  8. 武汉科技大学ACM：1007: 不高兴的津津

    Problem Description 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她 报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一 ...

  9. thrift之TTransport类体系原理及源码详细解析1-类结构和抽象基类

    本章主要介绍Thrift的传输层功能的实现,传输的方式多种多样,可以采用压缩.分帧等,而这些功能的实现都是相互独立,和上一章介绍的协议类实现方式比较雷同,还是先看看这部分的类关系图,如下: 由上面的类 ...

  10. 初始化JQuery方法与(function(){})(para)匿名方法介绍

    一.初始化JQuery对象 DOM加载完成时运行代码 1.$(document).ready(function(){ 全写 // 在这里写你的代码... }); 2.jQuery(function() ...