handsome主题修改右侧广告自动置顶
handsome主题默认右侧广告栏滚动到顶部后是只有文章目录是置顶的，而广告栏会被滚动出可视范围，只需要在主题设置里面加一些js代码即可实现广告栏与目录同时置顶。
本文转载自网络，如若侵权，联系我
自定义JS部分
如果没开启Pjax
首先需要在主题设置的开发者设置 - 自定义JavaScript中加入如下代码：
// 固定广告
var sidebar = $('#a_d_sidebar'),tagToc = $('#tag_toc'), ost;
sidebar.attr('otop', sidebar.offset().top);
$(window).scroll(function () {
ost = (document.body.scrollTop || document.documentElement.scrollTop) - 10;
if (ost >= parseInt(sidebar.attr('otop'))) {
tagToc.addClass('fixed-me');
if (sidebar.css('position') != 'fixed' && document.body.clientWidth >= 992) {
sidebar.css({"position": 'fixed', "top": "50px" });
tagToc.css({"position": 'fixed', "top": "330px" });
} else if (document.body.clientWidth < 992) {
sidebar.css({"position": 'static' });
tagToc.css({"position": 'static' });
tagToc.removeClass('fixed-me');
}
} else if (sidebar.css('position') != 'static') {
sidebar.css({"position": 'static' });
tagToc.css({"position": 'static' });
}
});加入这部分代码后，刷新页面然后上下滚动就能看到广告栏会自动置顶了
如果开启了Pjax
如果开启了主题的pjax功能的话，你会发现上面的代码设置后，虽然每次手动刷新后确实广告能固定了，不过如果是无刷新切换到其他页面，广告还是会滚动到可视范围外，因为pjax并不会重新执行上面的代码，我们需要同时在主题设置的开发者设置 - 自定义 JavaScript和PJAX - PJAX回调函数中都加入如下代码
// 固定广告
var sidebar = $('#a_d_sidebar'),tagToc = $('#tag_toc'), ost;
sidebar.attr('otop', sidebar.offset().top);
$(window).scroll(function () {
ost = (document.body.scrollTop || document.documentElement.scrollTop) - 10;
if (ost >= parseInt(sidebar.attr('otop'))) {
tagToc.addClass('fixed-me');
if (sidebar.css('position') != 'fixed' && document.body.clientWidth >= 992) {
sidebar.css({"position": 'fixed', "top": "50px" });
tagToc.css({"position": 'fixed', "top": "330px" });
} else if (document.body.clientWidth < 992) {
sidebar.css({"position": 'static' });
tagToc.css({"position": 'static' });
tagToc.removeClass('fixed-me');
}
} else if (sidebar.css('position') != 'static') {
sidebar.css({"position": 'static' });
tagToc.css({"position": 'static' });
}
});自定义CSS部分
无论开没开PJAX，都请在主题设置的开发者设置 - 自定义CSS中加入如下代码：
.fixed-me .tags{
width: 199px;
overflow: hidden;
}
.fixed-me #toc{
width: 199px;
max-height: 700px;
overflow-x: hidden;
position: relative;
}
