用 JS 更改元素的属性
用 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');
最终代码
$(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');
});
JavaScript 执行顺序
上面这段代码，最初是放在 标签内的尾部的，但是运行页面发现这段代码并未生效，在 Firebug 中逐句测试这段代码时却又生效了，经提醒应该是代码未被执行，思考之后认为应该是代码在页面中的位置有问题，以侧边栏插件 bigSlide 作为关键字搜索，发现侧边栏初始化的代码位于页面最下方，这样的话，页面执行的顺序其实是先用自己的代码调整了侧边栏的定位和高度，之后又通过 bigSlide 初始化插件，这样自定义的部分当然不会生效了，将上面的代码放在侧边栏插件初始化代码之后，一切OK~~~
关键字：JavaScript
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
