弄個側邊欄某個模塊隨窗口一起滾動,可能其他童鞋也想給主題加上這個小功能,貼出來,供大家參考。
方法一:
很簡單,前提是你的主題必須已加載了jQuery。
把下面代碼加到主題頭部header.php模版中即可:
- <script?type="text/javascript">
- $(function()?{
- ????var?$sidebar???=?$("#sidebar"),
- ????????$window????=?$(window),
- ????????offset?????=?$sidebar.offset(),
- ????????topPadding?=?15;
- ????$window.scroll(function()?{
- ????????if?($window.scrollTop()?>?offset.top)?{
- ????????????$sidebar.stop().animate({
- ????????????????marginTop:?$window.scrollTop()?-?offset.top?+?topPadding
- ????????????});
- ????????}?else?{
- ????????????$sidebar.stop().animate({
- ????????????????marginTop:?0
- ????????????});
- ????????}
- ????});
- });
- </script>
可根據不同的主題模版,自行修改一下其中的DIV標簽#sidebar名稱。此方法兼容所有瀏覽器。
HotNews主題也可使用該功能,默認是整個側邊欄隨窗口滾動,受主題布局功能限制,單獨滾動某個模塊效果不是很理想。
參考自:http://css-tricks.com/scrollfollow-sidebar/
WordPress主題側邊欄隨窗口滾動,貌似這個特效目前很流行,上面的內容是《jQuery實現側邊欄隨窗口滾動》的教程,不過有童鞋發現加上這個JS特效后,側邊欄會頂著頁腳無限滾下去,那就再發一個比較完美的,上代碼:
- <script?type="text/javascript">
- var?documentHeight?=?0;
- var?topPadding?=?15;
- $(function()?{
- ????var?offset?=?$("#sidebar").offset();
- ????documentHeight?=?$(document).height();
- ????$(window).scroll(function()?{
- ????????var?sideBarHeight?=?$("#sidebar").height();
- ????????if?($(window).scrollTop()?>?offset.top)?{
- ????????????var?newPosition?=?($(window).scrollTop()?-?offset.top)?+?topPadding;
- ????????????var?maxPosition?=?documentHeight?-?(sideBarHeight?+?368);
- ????????????if?(newPosition?>?maxPosition)?{
- ????????????????newPosition?=?maxPosition;
- ????????????}
- ????????????$("#sidebar").stop().animate({
- ????????????????marginTop:?newPosition
- ????????????});
- ????????}?else?{
- ????????????$("#sidebar").stop().animate({
- ????????????????marginTop:?0
- ????????????});
- ????????};
- ????});
- });
- </script>
將上述javascript代碼加到主題頭部header.php模版中。
修改其中的“#sidebar”為你的主題側邊選擇器名稱(id);例如:#categories-2,categories-2為ID。
根據不同的主題頭部模版高度,適當調整其中的數字“368”(默認數字為HotNews主題的)。
個人認為,網頁加上這個特效后,側邊模塊在眼前晃晃悠悠的,并不是很舒服,適合內容較少的側邊欄或者側邊最下面的固定模塊比如廣告滾動。蘿卜青菜各有所愛,大家接著折騰吧。
2013年6月8日 下午4:23 1F
寫的很好,讓我學習到了!
希望主人多寫一些技術類的文檔。