Admin

介绍一下handsome如何修改右侧侧边栏广告自动置顶
handsome主题默认右侧广告栏滚动到顶部后是只有文章目录是置顶的,而广告栏会被滚动出可视范围,只需要在主题设置...
扫描右侧二维码阅读全文
26
2019/02

介绍一下handsome如何修改右侧侧边栏广告自动置顶

handsome主题默认右侧广告栏滚动到顶部后是只有文章目录是置顶的,而广告栏会被滚动出可视范围,只需要在主题设置里面加一些js代码即可实现广告栏与目录同时置顶。
1922731315.jpg

自定义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;
}
最后修改:2019 年 02 月 26 日 05 : 35 PM
南来北往的大爷们,可怜可怜我吧,赏几两碎银子吧!

发表评论

z