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

jQuery粘性跟随滚动条滚动的导航栏的添加for zblog php

雨夜 4146次浏览 5个评论

应博友的求助,要实现他那个站点的导航条随着鼠标向下滚动的话,下一步导航条会滚动到头部。(说实话我起初也不会,百般试验后,终于实现了。呵呵)下面的两幅图效果比较下。

(1)向下滚动前

(2)向下滚动后:

下面说下具体操作方法

一、header.php里添加如下代码:

<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#menu').smint({
        'scrollSpeed' : 1000
    });
});
</script>

其中需要获得效果的地方代码如下(不需要修改,和上面的#menu对应):

<div id="menu">
    <ul>
      {module:navbar}
    </ul>
</div>


Ps:上面的#menu和下面的id="menu"对应,如果为“.menu”那么对应为class="menu";参数'scrollSpeed' : 1000  设置滚动时间,单位毫秒

二、在相应主题的script文件夹里添加jquery.smint.js文件和jquery-1.8.3.min.js

其中jquery.smint.js的内容如下:

 
/*
 
SMINT V1.0 by Robert McCracken
 
SMINT is my first dabble into jQuery plugins!
 
http://www.outyear.co.uk/smint/
 
If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
 
*/
(function(){
 

$.fn.smint = function( options ) {
 
// adding a class to users div
$(this).addClass('smint')
 
var settings = $.extend({
            'scrollSpeed '  : 500
            }, options);
 
 
return $('.smint a').each( function() {
 
            
if ( settings.scrollSpeed ) {
 
var scrollSpeed = settings.scrollSpeed
 
}
 
 
///////////////////////////////////
 
// get initial top offset for the menu 
var stickyTop = $('.smint').offset().top; 
 
// check position and make sticky if needed
var stickyMenu = function(){

// current distance top
var scrollTop = $(window).scrollTop(); 

// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop) { 
$('.smint').css({ 'width': '100%','position': 'fixed', 'top':0 }).addClass('fxd');
 
} else {
$('.smint').css({ 'position': '', 'top':stickyTop }).removeClass('fxd'); 
}   
};

// run function
stickyMenu();

// run function every time you scroll
$(window).scroll(function() {
 stickyMenu();
});
 
///////////////////////////////////////
    
        
         $(this).on('click', function(e){
 
 
// gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
var selectorHeight = $('.smint').height();   
 
          // stops empty hrefs making the page jump when clicked
e.preventDefault();
 
// get id pf the button you just clicked
   var id = $(this).attr('id');

// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
var goTo =  $('div.'+ id).offset().top -selectorHeight;

// Scroll the page to the desired position!
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
 
}); 
 
            
 
});
 
}
 
})();


 Ps

1css会变动的部分

if (scrollTop > stickyTop) { 
$('.smint').css({ 'width': '100%','position': 'fixed', 'top':0 }).addClass('fxd');
 
} else {
$('.smint').css({ 'position': '', 'top':stickyTop }).removeClass('fxd'); 
}   
};


是需要自己修改的,注意添加删除的选项的格式。

2)jquery-1.8.3.min.js 自己在网上下载就可以了。

 

三、保存刷新缓存就可以实现了。



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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5) 个小伙伴在吐槽
  1. 感谢您的无私帮助,可我是没有一点点代码基础的,都是凭着感觉在改代码,所以您给的这么详细的代码我还是没有搞定。我是这么做的,您看看能否帮我找出错误的地方:
    1.我的源码是zblog ASP2.1版的,好像没有header.php 这个文件。不过在default.html这里面有

    {module:navbar}

    所以我将代码复制到这里了
    2.两个JS文件,我已经搞定了,应该不会有问题!
    3.CSS会变动的部分,我又搞不定了,是全部复制到css文件的导航部分吗?还有“注意添加删除的选项的格式”,这句话我琢磨不透。
    所以还需要向您请教,再次感谢!
    钓鱼社 2014-06-24 AM 08:05 回复
    • 你将 改为asp版的就可以了。
      雨夜 2014-06-24 PM 07:52 回复
    • 哥们变通下好不。。。
      雨夜 2014-06-24 PM 07:45 回复
  2. 方法还不错的,收藏了哈
    大谋 2014-06-23 PM 11:41 回复
    • 你还真能折腾,网站又不能访问了。。。
      雨夜 2014-06-25 PM 10:05 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们