jQuery實現側邊欄隨窗口滾動,WordPress主題側邊欄隨窗口滾動

網站建設 jquery特效 html51 14,9191閱讀模式

弄個側邊欄某個模塊隨窗口一起滾動,可能其他童鞋也想給主題加上這個小功能,貼出來,供大家參考。

方法一:

很簡單,前提是你的主題必須已加載了jQuery。

把下面代碼加到主題頭部header.php模版中即可:

  1. <script?type="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. <script?type="text/javascript">
  2. var?documentHeight?=?0;
  3. var?topPadding?=?15;
  4. $(function()?{
  5. ????var?offset?=?$("#sidebar").offset();
  6. ????documentHeight?=?$(document).height();
  7. ????$(window).scroll(function()?{
  8. ????????var?sideBarHeight?=?$("#sidebar").height();
  9. ????????if?($(window).scrollTop()?>?offset.top)?{
  10. ????????????var?newPosition?=?($(window).scrollTop()?-?offset.top)?+?topPadding;
  11. ????????????var?maxPosition?=?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主題的)。

個人認為,網頁加上這個特效后,側邊模塊在眼前晃晃悠悠的,并不是很舒服,適合內容較少的側邊欄或者側邊最下面的固定模塊比如廣告滾動。蘿卜青菜各有所愛,大家接著折騰吧。

 
  • 本文由 米粒在線 發表于 2013年2月12日12:56:34
  • 轉載請務必保留本文鏈接:http://www.bjmhhq.com/3720.html
網站建設

網站速度很慢?使用 WordPress 短時緩存(Transients)來優化數據庫查詢和 HTTP 響應!

每個人都想要一個速度很快的網站,網站速度越快,用戶停留和點擊頁面或購買產品的時間就越長,加快網站速度的方法之一是開啟緩存,而緩存背后的邏輯就是存儲信息,更具體一點說,就是找到一個比連接數據庫更快的存儲...
    • InBi 1

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

    發表評論

    匿名網友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
    確定

    拖動滑塊以完成驗證