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

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

源码下载

实现的代码：

超文本标记语言代码：

div id=' page ' div id=' toolbar ' data-0=' height :192 px ' 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 3360 xlinkpadd : 0 0 24px 12px data-128=' font-size : 18px；padding : 0 21px 60px Title/div/div id=' content ' data-0=' padding-top : 192 px；data-192=' padding-top : 190 px；div class='card '内容转到这里！/divdiv class='card '内容转到这里！/divdiv class='card '内容转到这里！/divdiv class='card '内容转到这里！/divdiv class='card '内容转到这里！/divdiv class='card '内容转到这里！/divdiv class='card '内容转到这里！/div/div/div脚本src=' jquery。js '/script script src=' skroller。量滴js '/script脚本$(文档)。ready(function(){ skroller。init({ smooth scrolling 3360 true })；});//@ sourceURL=pen.js/scriptcss代码：

html，正文{ background : # fafafacolor : # 1BBBFB字体系列：无衬线字体；} # page { position : absolute top : 0；右： 0；底部： 0；左： 0；} #工具栏{ display:块位置：固定；宽度： 100%;z指数： 10；盒子尺寸：边框盒子；-moz-box-siz :边框盒；背景色-颜色： # 1BBBFBpadding: 0 16px } # actions {位置：相对；display : flex align-items :居中；挠曲方向：行；height : 64 xtop : 0；左： 0；右0;} #动作。图标{ padding: 7pxmargin: 2px垂直对齐： 中间；} #动作。垫片{ flex : 1；} # actions SVG { display : inline-block；指针事件：无；相对位置：垂直对齐： 中间；宽度： 24pxheight : 24 pxfill : # fff } # title { padd : 21px绝对位置：底部： 0；color : # fff } # content { display : }块相对位置：padding: 24px }。卡{显示：块；相对位置：宽度： 60%;高度： 100像素；border: 1px固体# 1BBBFB-web套件-边框-半径： 4px-moz-border-半径： 4px边界半径： 4px背景-color : # fff；余量： 16px自动；padding: 24px }