WordPress側欄小工具增加浮動跟隨效果

編輯：狂族晨曦 來源：建站分享，WordPress技巧 日期：2015-08-31 閱讀： 4,622 次 2 條評論 » 百度已收錄

在網上學習關于SEO知識的時候，經常看到的一點就是做好內鏈，所以可能會在文章頁的側邊欄上加入如“最新文章”等欄目。如果最新文章簡單的放在側邊欄，那訪客訪問的時候，只有在文章頂部的時候能看到一眼，如果感興趣了想看完本文再去查看，還要回到頂部去點擊。那么我們何不讓其鼠標隨滑呢？隨著鼠標的下拉，其始終在瀏覽器的顯示窗口中，訪客們看完文章眼神亂瞟的時候說不定就能看到其中感興趣的地方，這樣就減少了跳出率。

而我們在很多博客上，都看到已經實現了這種功能，包括我的網站。效果就是旁邊的最新文章啦，雖然丑了點：

百度谷歌上搜索了半天，找到了現在這個代碼，效果可隨便開一篇比較長的文章看。我把隨機文章放在小工具的最后一個，當下拉時瀏覽器碰到隨機文章的上邊時，會把隨機文章往下頂。

代碼如下：

jQuery(document).ready(function($){   
$.fn.smartFloat = function() {   
    var position = function(element) {   
        var top = element.position().top, pos = element.css("position");   
        $(window).scroll(function() {   
            var scrolls = $(this).scrollTop();   
            if (scrolls > top) {   
                if (window.XMLHttpRequest) {   
                    element.css({   
                        position: "fixed",   
                        top: 0   
                    });       
                } else {   
                    element.css({   
                        top: scrolls   
                    });       
                }   
            }else {   
                element.css({   
                    position: "absolute",   
                    top: top   
                });       
            }   
        });   
    };   
    return $(this).each(function() {   
        position($(this));                            
    });   
};   
  
//綁定,將引號中的內容替換成你想要下拉的模塊的ID或者CLASS名字,如"#ABC",".ABC"   
$(".widget_bd_random_post_widget").smartFloat();   
  
});

按照31行的注釋做相應的修改，然后將修改后的代碼放到主題需要加載的JS文件里即可。

還有另外一種漂浮的效果，代碼如下，效果可以點擊看這里：

jQuery(document).ready(function($){   
//將下一行引號中的內容替換成你想要下拉的模塊的ID或者CLASS名字,如"#ABC",".ABC"   
    var $sidebar   = $("#bd_random_post_widget-3"),      
        $window    = $(window),      
        offset     = $sidebar.offset(),      
        topPadding = 50;      
     
    $window.scroll(function() {      
        if ($window.scrollTop() > offset.top) {      
            $sidebar.stop().animate({      
                marginTop: $window.scrollTop() - offset.top + topPadding      
            });      
        } else {      
            $sidebar.stop().animate({      
                marginTop: 0      
            });      
        }      
    });      
     
});

添加方法和上一個代碼一樣，這個效果還不錯，但是如果頁面加載的東西多的話會有卡的感覺，具體選用哪個還請各位童鞋按照自己喜好選擇。