标签 typecho 下的文章

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;
    }