如何在侧边栏上制作粘性广告？

Question

我的网站是http://cafun.cf 我有一个包含侧边栏底部广告的div。当用户滚动直到它与页脚相遇时，我希望它向下滑动。

我尝试了很多使用jquery的解决方案，但它的工作方式不正确（我不太了解jquery！）

这是结构：

<aside> <!--other divs with 'asider' class -->
  <div class="asider">
     <div id="side_ad">
     <!-- Ad code-->
     </div>
  </div>
</aside>

请帮帮我...谢谢！

注意：我希望整个'asider'类向下滑动。

Answer 1

我认为你需要这样的东西

$stick = $('#marker');
jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($(window).scrollTop() > $stick.offset().top)
      $cache.css({
        'position': 'fixed',
        'top': '10px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

将$stick = $('#marker');的值设置为将触发固定元素或像素的元素。无论如何，有很多关于在滚动上修复div的例子

Take a look at this jsfiddle

Answer 2

这是CSS Way，DEMO：https://jsfiddle.net/9dvy5k46/

CSS

.asider {
    float:left;
    width:100%;
    background:#dfdfdf;
    padding:100px 0;
    margin-bottom:5px;
}
#side_ad {
    position:fixed;
    bottom:10px;
    right:5px;
    padding:50px;
    background:red;
    width:60px;
}