Javascript:浮动的导航条
代码主体及说明
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:浮动的导航条的更多相关文章
- JQuery Mobile+JS实现智能浮动定位导航条
实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...
- Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...
- Bootstrap_导航条
一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- 【CSS】 一个简单的导航条
今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...
- 玩转Bootstrap(基础) -- (6.导航条基础)
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap之导航条
基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
随机推荐
- HDU -2524 矩形A + B
找规律题,这种题目比较巧妙,要仔细观察找出规律 1. 假设只有一行,一共有n列,那么由一个小矩形构成的矩形个数为n, 由两个小矩形构成的矩形个数为 n - 1个 .... 由 n 个小矩形构成的矩形个 ...
- ckeditor常用设置
1.首先下载ckeditor放入自己的项目WebRoot目录下 2.在自己的页面中引入需要的js库 3.在界面中书写多行文本域 必须要有name或者id属性 不然没有效果显示 4.修改ckedito ...
- Html.ActionLink简单用法(转)
一 Html.ActionLink("要显示的文字","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, 默认 ...
- linux学习笔记<命令介绍>
主要介绍日常工作中一些常用的命令,内容均整理自慕课网 命令提示符 [root@hgs ~]# 其中: root : 当前登录用户 hgs : 主机名 ~ : 当前所在目录(家目录),对于root用户, ...
- SQL Server 2008 查询所有用户表
SQL Server 2008 查询所有用户表的T-SQL语句是: SELECT * FROM sysobjects WHERE [xtype] = 'U' 或者是: SELECT * FROM sy ...
- HDU 4605 Magic Ball Game (在线主席树|| 离线 线段树)
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 题意:给出一棵二叉树,每个结点孩子数目为0或者2. ...
- .net转php laraval框架学习系列(一) 环境搭建
之前也没写过什么博客,可能文章结构比较混乱,想到那写到哪. 主要是把自己学习中的经验写下来. 为什么选择laravel框架,是因为laravel框架目前是Php最流行的框架,深入研究后发现和asp.n ...
- 【结构型】Facade模式
外观模式主要意图是为子系统提供一个统一的接口,从而使用用户对子系统的直接依赖中,解耦合出来.Facade主要是通过为子系统统一封装个入口一样,原先用户对子系统的接口.类等都是直接访问,现在要通过Fac ...
- Python学习笔记整理(十)Python的if测试
if语句是选取要执行的操作. 一.if语句 1.通用格式 形式是if测试,后面跟着一个或多个可选的elif(else if)测试,以及一个最终选用的else块.测试和else部分可以结合嵌套语句块,缩 ...
- Andriod手势密码破解
★ 引子 之前在Freebuf上看到一片文章讲Andriod的手势密码加密原理,觉得比较有意思,所以就写了一个小程序试试. ★ 原理 Android的手势密码加密原理很简单: 先 ...