上一篇文章分享了《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下載: