上一篇文章分享了《jQuery - 下拉滚动隐藏/回滚显示- 特效代码》,本文再次分享一种实现的jQuery插件,ScrollUpBar Plugin插件,可以滚动隐藏和回滚、滚动显示!
代码分享:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动隐藏,回滚显示</title> <style> *{padding: 0;margin: 0;text-align: center} .nav{width: 100%; background-color:blue; color:#fff; font-size:24px; padding:5px; position: fixed; top:0; left:0;right: 0; /* transition: top .5s;*/ } .text{} </style> </head> <body> <div class="top"> 顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br> </div> <div class="nav" > 滚动显示或隐藏的菜单文字、菜单文字、菜单文字 </div> <div class="text"> 下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="scroll-up-bar.js"></script> <script> $('.nav').scrollupbar(); </script> </body> </html>
其中的scroll-up-bar.js下载: