位置：广州松河 > 技术支持 > jQuery - 下拉滚动隐藏/回滚显示 - 特效代码_js/jQuery

jQuery

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

最近写一个zblogPHP主题，需要用到滚动的时候隐藏菜单，而启动回滚的时候置顶显示这个菜单，如图：

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

分享滚动隐藏测试代码：

<!doctype html>
<html>
<head>
<meta charset="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>
<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>
$(function(){ 
    var yd_seviye = $(document).scrollTop();
    var yd_yuksekligi = $('.nav').outerHeight();
    $(window).scroll(function() {
        var yd_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必须注意！

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

·上一条：jQuery - ScrollUpBar Plugin插件，滚动隐藏/回滚显示_js/jQuery | ·下一条：jQuery瀑布流插件 - Masonry瀑布流特效代码分享_js/jQuery