专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

jQuery - ScrollUpBar Plugin插件,滚动隐藏/回滚显示_js/jQuery

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/3/4 1:18:50       共计:3626 浏览

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

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有