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

  • 1
  • 14,067 views

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

方法一:

很簡單,前提是你的主題必須已加載了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.yeahapk.com/3720.html
科技

挑戰手機抗凍極限 華為Mate 10 Pro竟然征服了南極

按照我國節氣來說現在正處在數九寒天中最冷的一段日子里,隨便翻閱天氣預報,全國各地大多數地區都在飄散著漫天的雪花,零下好幾度的光景也成為了很多地區人與手機之間無法躲避的問題。尤其是北方用戶,若是出門用手...
科技

微信封殺!MIUI下線自動記賬功能

小米在MIUI 9中加入了一個“微信自動記賬”的新功能,可以自動聚合微信、支付寶、短信等平臺的賬單信息,免去手動記賬的麻煩。 不過最近有不少網友發現,該功能已經無法正常使用,不能采集微信中的支付...
科技

努比亞Z17正式開啟安卓8.1內測:緊跟升級

去年12月份,谷歌公布了安卓各版本數據份額,據統計安卓8.0僅占安卓系統的0.5%,不過這也給目前的手機廠商打了一劑雞血,都在緊趕著給自家手機升級安卓8.0系統。 今天,努比亞官方就在論壇開啟了...
匿名

發表評論

匿名網友 填寫信息

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

評論:1   其中:訪客  1   博主  0
    • InBi InBi 1

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