300字范文 > jQuery – 下拉滚动隐藏/回滚显示 – 特效代码 – js/jQuery – 前端 jquery jgrowl 颜色

jQuery – 下拉滚动隐藏/回滚显示 – 特效代码 – js/jQuery – 前端 jquery jgrowl 颜色

时间：2024-05-16 13:12:07

这个jQuery特效非常好用，兼容性也比较好！

分享滚动隐藏测试代码：

<!doctypehtml><html><head><metacharset="utf-8"><title>滚动隐藏，回滚显示</title><style>*{padding:0;margin:0;text-align:center}.nav{background-color:#e74c3c;color:#fff;font-size:24px;padding:5px;position:fixed;top:0;left:0;right:0;//必带transition:top.5s;}.text{}.gizle{top:-90px;}//必带.sabit{top:0;z-index:9999;}//必带</style></head><body><divclass="nav">滚动显示或隐藏的菜单文字、菜单文字、菜单文字</div><divclass="text">下拉测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 下拉测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 下拉测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 下拉测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 </div><scriptsrc="/libs/jquery/2.1.4/jquery.min.js"></script><script>$(function(){varyd_seviye=$(document).scrollTop();varyd_yuksekligi=$(.nav).outerHeight();$(window).scroll(function(){varyd_cubugu=$(document).scrollTop();if(yd_cubugu>yd_yuksekligi){$(.nav).addClass(gizle);}else{$(.nav).removeClass(gizle);}if(yd_cubugu>yd_seviye){$(.nav).removeClass(sabit);}else{$(.nav).addClass(sabit);}yd_seviye=$(document).scrollTop();});});</script></body></html>

必须注意其中的CSS必须注意！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。