這篇文章主要介紹了兩種jQuery實現(xiàn)網(wǎng)頁右側(cè)廣告跟隨滾動的方法，感興趣的小伙伴可以參考一下。

兩種方法都分享給大家，希望對大家的學(xué)習(xí)有所啟發(fā)。

方法一：

1. <script type="text/javascript">// <![CDATA[  
2. $.fn.smartFloat = function() {  
3. var position = function(element) {  
4. var top = element.position().top, pos = element.css("position");  
5. $(window).scroll(function() {  
6. var scrolls = $(this).scrollTop();  
7. if (scrolls > top) {  
8. if (window.XMLHttpRequest) {  
9. element.css({  
10. position: "fixed",  
11. top: "10px" 
12. });  
13. } else {  
14. element.css({  
15. top: scrolls  
16. });  
17. }  
18. }else {  
19. element.css({  
20. position: pos,  
21. top: top  
22. });  
23. }  
24. });  
25. };  
26. return $(this).each(function() {  
27. position($(this));  
28. });  
29. };  
30.  
31. //綁定  
32. $("#float").smartFloat();  
33. // ]]></script>  

方法二：

1. /*頁面智能層浮動*/ 
2. jQuery(document).ready(function($){  
3. var $sidebar = $(".float"),  
4. $window = $(window),  
5. offset = $sidebar.offset(),  
6. topPadding = 20;  
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. <div id="float" class="float">  
20. <h3>博主推薦</h3>  
21. 廣告代碼  
22. </div> 

以上就是jQuery網(wǎng)頁右側(cè)廣告跟隨滾動，仿wordpress右側(cè)廣告跟隨滾動，希望對大家的學(xué)習(xí)有所幫助。