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

      寫的很好,讓我學習到了!
      希望主人多寫一些技術類的文檔。