jQuery - 下拉滚动隐藏/回滚显示 - 特效代码

 最近写一个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必须注意！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！