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

在线预览   源码下载

实现的代码：

html代码：

 <div id="page">
        <div id="toolbar" data-0="height:192px" data-128="height: 64px">
            <div id="actions">
                <div class="icon">
                    <svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="menu">
                            <path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z">
                            </path>
                        </g>
                    </svg>
                </div>
                <div class="spacer">
                </div>
                <div class="icon">
                    <svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://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>
                </div>
                <div class="icon">
                    <svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://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>
                </div>
            </div>
            <div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">
                Page Title
            </div>
        </div>
        <div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;">
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
            <div class="card">
                Content goes here!
            </div>
        </div>
    </div>
    <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;
}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9782

在线预览    源码下载