jQuery侧边浮动图片广告

侧边栏的浮动广告效果，是多老站长爱用的一招，吸睛还不挡内容。这套用 jQuery 搞的图片对联广告，思路挺清晰的：两张图片分列页面左右，随着滚动保持位置不变，效果还挺酷。

jQuery 的$(window).scroll()配合.css()就能实现基本的浮动。你可以这么写：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('.floating-ad').css('top', scrollTop + 'px');
});

动画方面嘛，fadeIn()、slideToggle()这类函数挺方便的，做个淡入淡出没问题。加点点击事件让广告能跳转，也就是一两行代码的事：

$('.floating-ad').click(function() {
  window.location.href = 'http://example.com';
});

样式上建议你把position设成absolute或fixed，不然浮动不了。尺寸别太大，影响浏览体验。哦对了，响应式别忘了，$(window).resize()配合媒体查询就行。

这种方式比较适合搞活动推广或者电商站的促销广告。代码不复杂，逻辑也清楚，维护起来也轻松。如果你正好要做侧边浮动广告，不妨试试这套。

想深入看看的话，可以点这里：jquery 图片对联广告制作