这个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">下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<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><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必须注意!