有之前购买过我主题的一位朋友让我出一篇侧边栏滑动的教程。其实我也是小白，这只是个js效果，wordpress也能用。理论上是不限制任何后台系统的。其实如果只做博客的话，强烈推荐typecho养老。哈哈~

在还没搜到这个js效果前的时候，也用过github里某位老外的jq侧边栏库，用起来不是很得劲，我一般会找相关功能的代码会先测试下，哪一种比较适合再去放到主题里。另外就是为了这么小的一个功能专门去加载一个js库真的很没必要。原谅我真的不会原生写js啊。我甚至看不懂该段js的意思。下面来记录下这个侧边栏的一些关键代码和个人在部署时遇到的坑位。

html代码结构

<div id="arlina">
  <div id="content">
    <div id="main">
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
    </div>
    <div id="side">
      <div id="sidecontent2" class="cf"><span>Static Widget</span></div>
      <div id="sidecontent"><span>Sticky Widget</span></div><!-- 绑定此需要滑动的选择器 -->
    </div>
  </div>
  <div id="footer" class="cf"></div><!-- 绑定footer -->
</div>

js代码

js代码部分，绑定自己主题的侧边栏css选择器和主题footer选择器。然后给修改好的js代码丢到主题文件footer.php里</body>前面进去就可以了。

<script type="text/javascript">
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
</script>

css代码

css部分，由于给侧边栏定位后，要想做到在不同尺寸屏幕上看起来比较和谐一点，就要用CSS3 @media 查询，给侧边栏在不同的尺寸上定一个固定宽度。由于我主题用的是bootstrap响应式框架，每当屏幕尺寸发生变化话，侧边栏的宽带会相应的变化。（说句简单点的，你给浏览器任意拉伸宽度，看看页面效果就知道了。）另外就是侧边栏内容不宜放太多，因为一旦放太多，会扯到蛋的。下拉到底部的时候侧边栏会回弹一样的，不算是bug，只算是美中不足。

css代码：

//下面以我主题来说明下css。上面的js和html就不用我自己的了。

//大于1199px的时候，宽度为262.5px，这里不会用到css3 @media 查询。
.widget-fixed.fixed {
    position: fixed;
    top: 70px;
    width: 262.5px;
}


//屏幕在小于1199px的时候，侧边栏的宽度为212.5px。
@media (max-width: 1199px)
.widget-fixed.fixed {
    width: 212.5px!important;
}

//屏幕在小于991px的时候，则整个侧边栏都不会显示。
@media (max-width: 991px)
#secondary {
    display: none;
}

大神路过别笑，我以为我是比较菜的，原来还有比我还小白的。渣渣技术不足以的写出来。献丑了。只是写着给需要帮助的小白看的，大神一般写就写关键代码，比较细的东西一般很少涉及到。