有之前购买过我主题的一位朋友让我出一篇侧边栏滑动的教程。其实我也是小白,这只是个 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。上面的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;
}