JQuery实现网页右侧随动广告特效

内容摘要
方法一：




<script type="text/javascript">// <![CDATA[
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().t
文章正文

方法一：

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

方法二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*页面智能层浮动*/
jQuery(document).ready(function($){
  var $sidebar = $(".float"),
  $window = $(window),
  offset = $sidebar.offset(),
  topPadding = 20;
  $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding
      });
    } else {
      $sidebar.stop().animate({
        marginTop: 0
      });
    }
  });
});

HTML

1
2
3
4
<div id="float" class="float">
<h3>推荐</h3>
广告代码
</div>

以上2种方法都可以实现页面右侧的随动广告特效，希望对大家能够有所帮助。
代码注释
上一篇C++封装远程注入类CreateRemoteThreadEx实例下一篇div模拟选择框示例代码

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！