Javascript:浮动的导航条

 

代码主体及说明

 

Javascript部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * @函数名: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动画部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>

　　

 

posted @   Me-Kevin  阅读(556)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
阅读排行：
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
· Ai满嘴顺口溜，想考研？浪费我几个小时
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
点击右上角即可分享
微信分享提示