应博友的求助,要实现他那个站点的导航条随着鼠标向下滚动的话,下一步导航条会滚动到头部。(说实话我起初也不会,百般试验后,终于实现了。呵呵)下面的两幅图效果比较下。
(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:
1)css会变动的部分
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 自己在网上下载就可以了。
三、保存刷新缓存就可以实现了。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请通知我们,一经查实,本站将立刻删除。