当先锋百科网

首页 1 2 3 4 5 6 7

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

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

滚动隐藏 回滚置顶显示.gif

这个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必须注意！