导航条，页面打开时显示，向下滚动页面时隐藏，向上滚动时显示。
觉得这样比较人性化，当向下滚动时，如果导航一直固定，占用了顶部空间，减少了页面展示范围，当向上滚动时，可能会有选择其他栏目的需求，所以这时显示导航。
HTML代码：
- <div class="addhead"></div>
- <div class="head">
- <ul><li><a href="#">栏目导航</a></li></ul>
- </div>
虽然<div class="addhead h_none"></div>是空的，但不可缺少，用来占位。
CSS代码：
- .h_block{display: block;}
- .h_none{display:none;}
- .addhead{height: 80px;display: none;}
- .head{z-index: 200;width: 100%;margin-bottom: 15px;box-shadow: 0px 0px 3px #B6B6B6;background:#FFF;}
JQ代码：
- <script>
- var p = 0, t = 81;
- $(window).scroll(function(e){
- p = $(this).scrollTop();
- if(t < p){
- $('.head').removeClass('headscroll');
- $('.head').css({position:"relative"});
- $('.addhead').addClass('h_none');
- $('.addhead').removeClass('h_block');
- }else{
- $('.head').addClass('headscroll');
- $('.head').css({position:"fixed",top:"0px"}).fadeIn(500);
- $('.addhead').addClass('h_block');
- $('.addhead').removeClass('h_none');
- }
- setTimeout(function(){
- t = p;
- }, 0);
- });
- </script>
如果用在discuz里，可能会出现jq冲突，需要加一个代码：
- <script type="text/javascript">jq = jQuery.noConflict();</script>
然后将上面jq代码里的$换成jq
- <script type="text/javascript">jq = jQuery.noConflict();</script>
- <script>
- var p = 0, t = 81;
- jq(window).scroll(function(e){
- p = jq(this).scrollTop();
- if(t < p){
- jq('.head').removeClass('headscroll');
- jq('.head').css({position:"relative"});
- jq('.addhead').addClass('h_none');
- jq('.addhead').removeClass('h_block');
- }else{
- jq('.head').addClass('headscroll');
- jq('.head').css({position:"fixed",top:"0px"}).fadeIn(500);
- jq('.addhead').addClass('h_block');
- jq('.addhead').removeClass('h_none');
- }
- setTimeout(function(){
- t = p;
- }, 0);
- });
- </script>
