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

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>

请帮助我...谢谢！

---

注意：我希望整个“入门者”课程都可以滑下来。

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();
});

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

看看这个jsfiddle

Answer 2

这是CSS方式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;
}