jQuery网页右侧广告跟随滚动代码分享

这篇文章主要介绍了两种jQuery实现网页右侧广告跟随滚动的方法，感兴趣的小伙伴可以参考一下。

两种方法都分享给大家，希望对大家的学习有所启发。

方法一：

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网页右侧广告跟随滚动，仿wordpress右侧广告跟随滚动，希望对大家的学习有所帮助。