基于jquery固定于顶部的导航响应浏览器滚动条事件

今天给大家分享一款基于jquery固定于顶部的导航，这款导航当滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部。效果图如下：

实现的代码：

html代码：

<p id="page">
<p id="toolbar" data-0="height:192px" data-128="height: 64px">
<p id="actions">
<p class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<g id="menu">
<path d="m3,18h18v-2h3v18z m3,13h18v-2h3v13z m3,6v2h18v6h3z">
</path>
</g>
</svg>
</p>
<p class="spacer">
</p>
<p class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<g id="search">
<path d="m15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2c16,5.9,13.1,3,9.5,3c5.9,3,3,5.9,3,9.5s5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5l15.5,14z m9.5,14c7,14,5,12,5,9.5s7,5,9.5,5c12,5,14,7,14,9.5s12,14,9.5,14z">
</path>
</g>
</svg>
</p>
<p class="icon">
<svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<g id="more-vert">
<path d="m12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2s10.9,8,12,8z m12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2s13.1,10,12,10z m12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2s13.1,16,12,16z">
</path>
</g>
</svg>
</p>
</p>
<p id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">
page title
</p>
</p>
<p id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;">
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
<p class="card">
content goes here!
</p>
</p>
</p>
<script src='jquery.js'></script>
<script src='skrollr.min.js'></script>
<script> $(document).ready(function () {
skrollr.init({ smoothscrolling: true });
}); //@ sourceurl=pen.js
</script>

css代码：

 

html, body {
background: #fafafa;
color: #1bbbfb;
font-family: sans-serif;
}

#page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

#toolbar {
display: block;
position: fixed;
width: 100%;
z-index: 10;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #1bbbfb;
padding: 0 16px;
}

#actions {
position: relative;
display: flex;
align-items: center;
flex-direction: row;
height: 64px;
top: 0;
left: 0;
right 0;
}

#actions .icon {
padding: 7px;
margin: 2px;
vertical-align: middle;
}

#actions .spacer {
flex: 1;
}

#actions svg {
display: inline-block;
pointer-events: none;
position: relative;
vertical-align: middle;
width: 24px;
height: 24px;
fill: #fff;
}

#title {
padding: 21px;
position: absolute;
bottom: 0;
color: #fff;
}

#content {
display: block;
position: relative;
padding: 24px;
}

.card {
display: block;
position: relative;
width: 60%;
height: 100px;
border: 1px solid #1bbbfb;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
background-color: #fff;
margin: 16px auto;
padding: 24px;
}