位置：广州松河 > 技术支持 > jQuery - ScrollUpBar Plugin插件，滚动隐藏/回滚显示_js/jQuery

jQuery

来源：网络整理时间：2023/3/4 1:18:50 共 3647 浏览

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

ScrollUpBar Plugin.zip

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS段落第一个文字空两格缩进text-indent 和文字之间间距调整letter-spacing_CSS学习 | ·下一条：jQuery - 下拉滚动隐藏/回滚显示 - 特效代码_js/jQuery