欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

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

雨夜 3127次浏览 6个评论

今天自己运行昨天做的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一样...)

希望对大家有所帮助。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6) 个小伙伴在吐槽
  1. 呵呵 微不足道,无须挂齿
    一起赚外快 2014-07-28 PM 04:00 回复
  2. 真的不知道怎么感谢涂涂研版的哥们,不仅无私协助,而且不耐其烦,在您的帮助下,我已经成功将导航跟随了,谢谢!
    一起赚外快 2014-07-28 PM 12:43 回复
    • 解决了就好了,呵呵,都是进步。
      雨夜 2014-07-28 PM 02:03 回复
      • 好像评论的时间不对啊,,,是不是换了主题的缘故
        一起赚外快 2014-07-28 PM 03:06 回复
        • 谢谢哥们的提醒,我看了下还真是个小错误。是函数调用错误了。已经改正了,呵呵。再次谢谢。
          雨夜 2014-07-28 PM 03:31 回复
        • 是贵站的时间,你看评论的是6月34号。。。今天7月28号啦
          一起赚外快 2014-07-28 PM 03:07 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们