滑动导航栏也来滑动

1 四月, 2010

前几天到的《CSS那些事儿》看得无味一点不好玩，还是折腾jQuery了！

不妨注意左侧的滑动导航栏，然后试着滑动下浏览器的滚动条？

《“返回顶部”加强版》其中CSS用了IE6不支持的“position:fixed”定位，造成IE6下会有大片空白内容，相当的杯具。今天就来微调下：

#shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;}

把CSS部分fixed改为absolute绝对定位，然后用jQuery来控制滑动导航栏的滑动：

var s= $('#shangxia').offset().top; //取得id="shangxia"元素相对当前窗口的高度，并赋值给 s
 
$(window).scroll(function (){ //浏览器滚动条触发事件
 
	$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});
 
	//添加id="shangxia"元素自定义动画，使其滑动"滚动条距顶部高度+ s "距离，动画过程为500毫秒；
 
});

OK，出来的效果也是相当不错哦！重要的是兼容IE6了，万恶的IE6啊~

89 评论

起衣：
2010/4/1 23:42:23 #1

回复
沦落成为沙发党..
- 林木木：
  
  回复
  额，要不以后俺们自沙？
  - 起衣：
    
    回复
    自沙可耻…
小闇：
2010/4/2 01:27:1 #2

回复
嗚沙發沒有了
- 小闇：
  
  回复
  不知道為什麼滑動條會一路向下跑了(囧
  木木來看看吧?
  - 林木木：
    
    回复
    强制刷新下？应该是缓存了关系！
    - 小闇：
      
      回复
      依能無能耶……我想有可能是主題內的js相撞了(失望
      - 林木木：
        
        回复
        额，我理解错误了，小闇记得修改CSS呀~
万戈：
2010/4/2 08:04:8 #3

回复
正巧有人问我这个效果来着，看来你这里有现成的教程了，呵呵
- 林木木：
  
  回复
  呵呵，那就拿去咯~~
阿修：
2010/4/2 08:36:8 #4

回复
下一步会不会把侧栏也搞成滑动的？
- 林木木：
  
  回复
  我这侧边栏弄成这样的效果很容易，多加个对象就OK了，主要是考虑考有些博客侧边栏比较长，这个代码有缺陷……
  - 阿修：
    
    回复
    话说顶部导航栏在IE6下无效。这个倒是可以用。我觉得这俩可以合并~~哈哈，我折腾一下
    - 林木木：
      
      回复
      导航栏米办法……IE6不兼容fixed
      - hzlzh ：
        
        回复
        是啊，我测试之后放弃了这个效果，万恶的IE6
GEZ鸽子：
2010/4/2 09:22:9 #5

回复
这个很实用哦！收藏了！
- 林木木：
  
  回复
  嘻嘻，多谢支持哦！
阿里斯顿：
2010/4/2 09:22:9 #6

回复
看起来效果还算不错,支持继续研究!
uoian ：
2010/4/2 10:42:10 #7

回复
文是好文，但是这字体怎么在我的浏览器上看起来这么恶心，另外，打算在我的BLOG上把这个方法用起来。呵呵。
- 林木木：
  
  回复
  微软雅黑……
immkoala ：
2010/4/2 12:47:12 #8

回复
呵呵准备给俺的小站也弄一个~
- 林木木：
  
  回复
  支持支持~~~
隐残影：
2010/4/2 13:08:13 #9

回复
嘿嘿，正好在搞这个，发现你的代码简洁多了…立马换上..
- 林木木：
  
  回复
  看来很多人都有在折腾这个代码哈~
hzlzh ：
2010/4/2 13:37:13 #10

回复
觉得还是固定了蛮好看，ps这次页面加载时间好长，不知是不是那个 button 影响了
- hzlzh ：
  
  回复
  我已经完全 copy 了你这个效果，懒人啊有空在修改样式和图片
- 林木木：
  
  回复
  耍酷那就刷得彻底点嘛！
QiQBoY ：
2010/4/2 14:22:14 #11

回复
以前固定着不容易发现，这下很容易就看到左边这个快捷工具。。
- 林木木：
  
  回复
  是啊，动着动着就很容易引起注意了！
redky ：
2010/4/2 15:09:15 #12

回复
个人认为如果只把它加到scroll事件里面,不如再把它加到resize事件里面.这样可能会更好吧
- 林木木：
  
  回复
  resize还不了解哟，Google去了~
西门：
2010/4/3 00:18:0 #13

回复
只可惜，上班忙，没时间折腾这些了
- 林木木：
  
  回复
  我这是没东西写了只能折腾些技术文……
掌柜的马甲：
2010/4/3 01:33:1 #14

回复
好多滑动啊…
- 林木木：
  
  回复
  哈哈，是蛋疼了……
皓辰：
2010/4/3 12:24:12 #15

回复
不卡么- -我有点卡
- 林木木：
  
  回复
  IE下肯定卡的……
zwwooooo ：
2010/4/3 17:36:17 #16

回复
不错，最近懒得玩 jQ 了
- 林木木：
  
  回复
  懒了都懒了啊！
小明：
2010/4/3 17:38:17 #17

回复
木木的博客越来越漂亮了！
- 林木木：
  
  回复
  嘻嘻
羽中：
2010/4/3 19:41:19 #18

回复
我那以前有个后来觉得拖速度去了。。
- 林木木：
  
  回复
  试试这个不？
  - 羽中：
    
    回复
    抽空试试
老饕：
2010/4/3 21:08:21 #19

回复
我没看出来区别~~ff的说
- 林木木：
  
  回复
  原来是用CSS的fixed固定在那的，现在虽滚动条滚动而滚动~
小邪：
2010/4/3 21:26:21 #20

回复
呜呜，又想到伤心的地方了 ~
JQ库好大，要是浏览器内置就完美了！！
- 林木木：
  
  回复
  浏览器内置？这个想法不错！

小邪：

2010/4/3 21:43:21 #21

嘻嘻，请教一下，下面的代码如何排除 a 里面包含 img 标签的 a ？

 
jQuery(document).ready(function($){ 
 
$('a').click(function(){
	myloadoriginal = this.text;
	$(this).text('载入中 ...');
	var myload = this;
	setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);		
});
 
});

林木木：

回复
(‘a:not(a img a)’）不知道这样对不对……
- 小邪：
  
  回复
  ╮(╯▽╰)╭，杯具 ~ 貌似不行呐 ~
  有盆友问小邪说是这个效果会把图片形式的链接也换成字，然后还变不回来 ~
  呜呜 ~
  - 林木木：
    
    回复
    $('a').not($('a').has('img')).click(function(){ ……
    
    这样行哦，本地测试通过，哈哈哈，俺好有才哟！！
    - 隐残影：
      
      回复
      嘿嘿…这不是我上次请教小邪的问题咩…木木威武…
      - 小邪：
        
        回复
        嘿嘿，JQ的问题还是木木厉害 ~
      - 林木木：
        
        回复
        呜哈哈~~
    - 隐残影：
      
      回复
      jQuery(document).ready(function($){
      
      $(‘a’).not($(‘a’).has(‘img’)).click(function(){
      myloadoriginal = this.text;
      $(this).text(‘载入中 …’);
      var myload = this;
      setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);
      });
      
      });
      
      一个都不会变了..T_T
    - 小草：
      
      回复
      还有个感觉代码少点的方式
      $(‘a:not(:has(img))’).click
  - 隐残影：
    
    回复
    小邪…为什么我用了新代码后直接无效掉了…
    - 林木木：
      
      回复
      额，本地测试通过了的呢……

权子：
2010/4/3 21:54:21 #22

回复
来林木木大侠贵地踩一脚
- 林木木：
  
  回复
  HOHO，欢迎欢迎~~
Four eyes ：
2010/4/4 14:34:14 #23

回复
貌似真高深做不出来
- 林木木：
  
  回复
  额……伪技术飘呀飘~~
世纪之光：
2010/4/7 03:04:3 #24

回复
很好很强大，jQuery就是牛逼。
- 林木木：
  
  回复
  归根到底还是JS强大呀！
rusaer ：
2010/4/7 22:23:22 #25

回复
你可真是很会折腾阿，你这站里，看到的全是技术阿
- 林木木：
  
  回复
  还是寂寞了，闲得蛋疼，就折腾WP咯~
willin ：
2010/4/7 22:37:22 #26

回复
木木太厲害了! 又有特效出來了.
- 林木木：
  
  回复
  呵呵，到处溜达回来的成果~
阿邙：
2010/4/11 02:19:2 #27

回复
IE6真的是让人头疼的。。
为了测试我特意在虚拟机上安装了IE6、、
- 林木木：
  
  回复
  还虚拟机呀，用IE Tester呀，很是很好用的~
成：
2010/4/12 00:05:0 #28

回复
我打算不理会IE6了.太伤感了…
- 林木木：
  
  回复
  恩，理IE6就是折腾自己呀！
ansonyi ：
2010/4/18 08:54:8 #29

回复
哇…厉害
- 林木木：
  
  回复
  拿来耍酷，HOHO
oumu ：
2010/4/23 16:12:16 #30

回复
安装成功之后不停的上上下下点着玩…
感谢~
- 林木木：
  
  回复
  哈哈，我刚折腾好的时候也是呢，现在没这个都不习惯的呢！
风向标：
2010/5/6 05:15:5 #31

回复
小白也来看了，虽然已经在学了，但是看不太懂哦。木木能不能给小白一个机会，告诉我这两句代码分别放哪里，还有重要的一点，把三张图片也交出来吧，自己回去PS一下。
- 林木木：
  
  回复
  图是可以看源码获得链接的……代码网上搜搜相应的使用方法~
蛋蛋：
2010/7/15 21:53:21 #32

回复
木木木木木就是我的偶像啊！！滑动效果这么强！！拿走试试！
- 林木木：
  
  回复
  不要迷恋木木，木木只是一个传说～
  - 蛋蛋：
    
    回复
snowxh ：
2010/7/19 00:57:0 #33

回复
为什么我这样改完之后他就固定在那不动了呢
- 林木木：
  
  回复
  jQuery代码加好了吗？
Touch ：
2010/9/26 22:15:22 #34

回复
为什么我添加代码之后反而效果没实现

点击之后也没反应
Touch ：
2010/9/26 22:32:22 #35

回复
问题已解决了
囧啊囧：
2010/12/2 13:55:13 #36

回复
我就是要找这个
囧啊囧：
2010/12/2 14:02:14 #37

回复
看到了不怎么怎么做

发表评论取消回复

< >

木木木木木

滑动导航栏也来滑动

发表评论 取消回复

发表评论取消回复