jQuery实现侧边栏随窗口滚动,WordPress主题侧边栏随窗口滚动

  • A+

弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。

方法一:

很简单,前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可:

  1. <scripttype="text/javascript">
  2. $(function(){
  3. var$sidebar=$("#sidebar"),
  4. $window=$(window),
  5. offset=$sidebar.offset(),
  6. topPadding=15;
  7. $window.scroll(function(){
  8. if($window.scrollTop()>offset.top){
  9. $sidebar.stop().animate({
  10. marginTop:$window.scrollTop()-offset.top+topPadding
  11. });
  12. }else{
  13. $sidebar.stop().animate({
  14. marginTop:0
  15. });
  16. }
  17. });
  18. });
  19. </script>

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

参考自:http://css-tricks.com/scrollfollow-sidebar/


WordPress主题侧边栏随窗口滚动,貌似这个特效目前很流行,上面的内容是《jQuery实现侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着页脚无限滚下去,那就再发一个比较完美的,上代码:

  1. <scripttype="text/javascript">
  2. vardocumentHeight=0;
  3. vartopPadding=15;
  4. $(function(){
  5. varoffset=$("#sidebar").offset();
  6. documentHeight=$(document).height();
  7. $(window).scroll(function(){
  8. varsideBarHeight=$("#sidebar").height();
  9. if($(window).scrollTop()>offset.top){
  10. varnewPosition=($(window).scrollTop()-offset.top)+topPadding;
  11. varmaxPosition=documentHeight-(sideBarHeight+368);
  12. if(newPosition>maxPosition){
  13. newPosition=maxPosition;
  14. }
  15. $("#sidebar").stop().animate({
  16. marginTop:newPosition
  17. });
  18. }else{
  19. $("#sidebar").stop().animate({
  20. marginTop:0
  21. });
  22. };
  23. });
  24. });
  25. </script>

将上述javascript代码加到主题头部header.php模版中。

修改其中的“#sidebar”为你的主题侧边选择器名称(id);例如:#categories-2,categories-2为ID。

根据不同的主题头部模版高度,适当调整其中的数字“368”(默认数字为HotNews主题的)。

个人认为,网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar InBi 1

      写的很好,让我学习到了!
      希望主人多写一些技术类的文档。