用 bigSlide 生成的可滑动侧边栏需要更改其定位和高度属性,更改定位令其与中间内容区域的顶部对齐,更改高度令其与中间内容区域的底部对齐。这个问题可以拆分为下面几个需求来依次实现:
更改侧边栏定位
获取中间内容区域顶部与页面最上方的距离
通过结合 CSS 选择器,可以快速定位目标元素,然后利用 offset()
方法的 top
属性,即可得到元素顶部与页面最上方的距离。
var topOffsetToTop = $('div.main-body div.view-tab.learn-tab').offset().top;
参考内容:jQuery: the offset() and position() method
获取页面顶部导航栏的高度
由于侧边栏是相对定位,默认位置紧邻顶部导航栏,那么如果要与右侧的内容区域顶端对齐,则侧边栏向下移动的距离,就等于内容区域与页面最上方的距离,减去页面顶部导航栏的高度。
var topNavBarHeight = $('#header').height();
设置侧边栏定位
有了中间内容区域顶部与页面最上方的距离,以及页面顶部导航栏的高度,侧边栏需要向下移动的距离很容易就算出来了。
$('#menu').css("top", topOffsetToTop - topNavBarHeight + 'px');
参考内容:how to remove only one style property with jquery
更改侧边栏高度
原理与上面更改侧边栏定位的思路相同,中间内容区域顶部的位置已知,那么只要知道中间内容区域底部的位置,就能够得到该区域的高度,然后令侧边栏也为相同高度即可。
计算中间内容区域底部距页面顶部的距离
var contentAreaBottomOffsetToTop = $('#thread_view').offset().top + $('#thread_view').height();
令侧栏高度为中间内容区域高度
var contentAreaHeight = contentAreaBottomOffsetToTop - topOffsetToTop;
$('#menu').css("height", contentAreaHeight + 'px');
最终代码
<script>
$(document).ready(function () {
//////////////////////////////////
// 设置侧边栏的位置和高度
//////////////////////////////////
// 获取视频标题距离页面顶部距离
var topOffsetToTop = $('div.main-body div.view-tab.learn-tab').offset().top;
// 获取页面顶部导航栏高度
var topNavBarHeight = $('#header').height();
// 令侧边栏与导航栏之间的距离为上两者之差
$('#menu').css("top", topOffsetToTop - topNavBarHeight + 'px');
// 计算中间内容区域底部距页面顶部距离,不含底部pagination
var contentAreaBottomOffsetToTop = $('#thread_view').offset().top + $('#thread_view').height();
// 计算中间内容区域高度,不含底部pagination
var contentAreaHeight = contentAreaBottomOffsetToTop - topOffsetToTop;
// 令侧栏高度为中间内容区域高度
$('#menu').css("height", contentAreaHeight + 'px');
});
</script>
JavaScript 执行顺序
上面这段代码,最初是放在 <head>
标签内的尾部的,但是运行页面发现这段代码并未生效,在 Firebug 中逐句测试这段代码时却又生效了,经提醒应该是代码未被执行,思考之后认为应该是代码在页面中的位置有问题,以侧边栏插件 bigSlide
作为关键字搜索,发现侧边栏初始化的代码位于页面最下方,这样的话,页面执行的顺序其实是先用自己的代码调整了侧边栏的定位和高度,之后又通过 bigSlide
初始化插件,这样自定义的部分当然不会生效了,将上面的代码放在侧边栏插件初始化代码之后,一切OK~~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。