jQuery侧边浮动广告

<div class="floating-ad">
  <a href="#">
    <img src="ad-image.jpg" alt="广告图片">
  </a>
</div>

CSS这块也不复杂，用position: fixed把广告固定住，再配个top和right定位下位置，广告就稳稳贴边了：

.floating-ad {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  height: 250px;
  z-index: 999;
}

jQuery的活主要是监听页面滚动。滚动到一定位置，把position变成fixed，广告就开始漂浮。代码也不多：

$(document).ready(function() {
  var ad = $('.floating-ad');
  var adTop = ad.offset().top;
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > adTop) {
      ad.css('position', 'fixed');
      ad.css('top', '20px');
    } else {
      ad.css('position', 'static');
      ad.css('top', '');
    }
  });
});

用的时候注意下兼容性问题，尤其是旧浏览器对position: fixed支持不太给力的情况。可以考虑加点兜底逻辑，或者退一步用absolute配合 JS 手动定位。

如果你在做资讯站、电商首页，或者需要高曝光区域的页面，这种浮动广告还挺实用的。要是想拓展玩法，还可以看看这几个相关资源：

• jquery 滚动固定侧边栏插件
• 可伸展的 jQuery 侧边栏固定浮动菜单
• jquery 网页浮动右下角侧边栏

页面越长越有效果，别忘了给广告内容来点视觉亮点，才能真正吸住用户。