jQuery粘性跟随滚动条滚动的导航栏的添加for zblog （asp and php）（更好）-教程、积累-涂涂研版

今天自己运行昨天做的jQuery粘性跟随滚动条滚动的导航栏的添加for zblog php ，运行了下，在测试的过程中突然发现一个问题，就是在滚动到中间部分（左右）的地方刷新一下之后导航条有时候会消失掉，会造成失效，所以我决定放弃这种方法，找更好的方法，所以在不懈努力下成功实现了，当然也缺不了昨晚的努力而获得的能力。呵呵。下面具体讲述：（由于对于zblog，他分为php版和asp版，所以我分两个版本讲，以metro模板为例）

一、zblog for php

1.在metro主题模板文件夹找到header.php文件，打来后在<head>...</head>之间添加如下内容：

<script src="{$host}zb_users/theme/{$theme}/script/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        var topmenu = jQuery(".nevbarbg");
        var topmenu_top = topmenu.offset().top;
        reset_topmenu_top(topmenu, topmenu_top);
        jQuery(window).scroll(function() {
            reset_topmenu_top(topmenu, topmenu_top);
        });
    });
    function reset_topmenu_top(topmenu, topmenu_top) {
        var document_scroll_top = jQuery(document).scrollTop();
        if (document_scroll_top > topmenu_top) {
            topmenu.css({
                'width': '100%',
                'position': 'fixed',
                'top': '0px'
            });
        }
        if (document_scroll_top <= topmenu_top) {
            topmenu.attr('style', {
                'top': topmenu_top + 'px'
            });
        }
    }
</script>

ps：

1)其中.nevbarbg对应metro要获得效果的导航条代码部分的class=“nevbarbg”代码如下：

<div class="nevbarbg">
  <div class="navbar">
    <ul>
      {module:navbar}
    </ul>
  </div>
</div>

2）当然其中后面的<script>...</script>部分的可以把它放在其他js文件里。（要记得把<script></script>删除了。）

2.在相应主题（这里是metro）的script文件夹里添加jquery.js。可以在网上下载。

是不是和上一篇的文章差不多难。实际上就是一样的，，，只不过这个效果好点，简单点。

二、zblog for asp

1.在metro主题模板文件夹中找到header.html文件，打来后在<head>...</head>之间添加如下内容：

  <script src="<#ZC_BLOG_HOST#>zb_users/theme/<#ZC_BLOG_THEME#>/script/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        var topmenu = jQuery(".nevbarbg");
        var topmenu_top = topmenu.offset().top;
        reset_topmenu_top(topmenu, topmenu_top);
        jQuery(window).scroll(function() {
            reset_topmenu_top(topmenu, topmenu_top);
        });
    });
    function reset_topmenu_top(topmenu, topmenu_top) {
        var document_scroll_top = jQuery(document).scrollTop();
        if (document_scroll_top > topmenu_top) {
            topmenu.css({
                'width': '100%',
                'position': 'fixed',
                'top': '0px'
            });
        }
        if (document_scroll_top <= topmenu_top) {
            topmenu.attr('style', {
                'top': topmenu_top + 'px'
            });
        }
    }
</script>

ps：

1)其中.nevbarbg对应metro要获得效果的导航条代码部分的class=“nevbarbg”代码如下：

<div class="nevbarbg">
  <div class="navbar">
    <ul>
      <#CACHE_INCLUDE_NAVBAR#>
    </ul>
  </div>
</div>

2）当然其中后面的<script>...</script>部分的可以把它放在其他js文件里。（要记得把<script></script>删除了。）（和php一样...）

2.在相应主题（这里是metro）的script文件夹里添加jquery.js。可以在网上下载。（和php一样...）

希望对大家有所帮助。

jQuery粘性跟随滚动条滚动的导航栏的添加for zblog （asp and php）（更好）

相关推荐

swipe左右滑动动态导航条

phpword php导出word wordpress实例，设置字体，导出代码等

调用一周的文章数量（当前时间向前推6天）

zblogphp取消插件接口，使某个接口失效，取消接口方法

mysql 嵌套查询---in嵌套查询

zblogphp调用所属分类的文章