最近弄了一个小插件 simpletoc 实现文章目录章节导航，真的挺好的一个小插件。但锚点定位与我这个主题匹配有一点点的小瑕疵。
锚点定位瑕疵现象
没有登录的情况下，由于菜单栏固定显示 position: fixed; 这样导致锚点定位被菜单栏遮挡了
如下图：
登录后的情况下，wpadmin-bar 也是固定显示 position: fixed; 这样锚点定位后被完全遮挡了，导致体验非常的糟糕。
实际上我早就发现了这个问题，由于之前很少使用锚点定位，只在bbPress上很小部分内容用了，因为需要手动添加设置锚点连接，比较麻烦所以很少使用锚点定位到指定内容。目前有了这个 simpletoc 插件可以实现自动添加锚点和连接，对于内容比较长的文章，锚点定位到指定内容真心非常实用。
所以必需将这个小瑕疵给解决了。
我现在用的这个主题因为结合了bbPress与BuddyPress深度自定义了各种模板与css样式，所以不能轻易的更换主题，太累。琢磨了几个小时，终于解决了这个小瑕疵。
锚点定位与偏移
偏移就是要偏移的，但要偏移多少？登录与未登录之间相差了一个wpadmin-bar，移动端与PC端的菜单栏和 wpadmin-bar 又有几种模式需要去匹配，别看就这小瑕疵，还是花不少的时间。
目前我用 jQuery 与 CSS 配合解决了此问题，解决问题的过程中发现了CSS居然有函数与变量。
解决 wpadmin-bar 偏移量
jQuery片段我就一起放在页脚footer.php模板上，与返回顶部的jQuery片段在一起。
css样式属性值 --wp-admin-bar-height: 46px; 需要添加到 html 这里，不然 scroll-padding-top 会没有任何效果，其中的复杂关系，暂时没有时间去折腾清楚，先用着吧。
jQuery(function(){
// 用户登录后就会有wpadminbar
if ( jQuery('#wpadminbar').length > 0 ) {
// 屏幕尺寸小于782px
if ( jQuery(window).width() < 782 ){
// 在html添加css样式属性值 --wp-admin-bar-height: 46px;
jQuery('html').css("--wp-admin-bar-height","46px");
} else { // 屏幕尺寸大于782px
// 在html添加css样式属性值 --wp-admin-bar-height: 32px;
jQuery('html').css("--wp-admin-bar-height","32px");
}
}
});
jQuery(function(){
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()>200){
jQuery('.go-to-top').addClass('go-on');
} else {
jQuery('.go-to-top').removeClass('go-on');
}
});
jQuery('#to-top').click(function(){
jQuery('html, body').animate({scrollTop:0},300);
});
});
如果不使用jQuery判断 wpadmin-bar ，纯CSS也可以避免被固定的菜单栏与wpadmin-bar遮挡，但还是存在一点点瑕疵，所以暂时还是用了一点jQuery片段来配合一下。
配合CSS样式
我发现 WordPress 的 admin-bar 在不同分辨率下，有3种不同的样式，有点恶心。最主要使用 scroll-padding-top 来实现不同情况下的偏移量，最终完美定位到指定锚点。
/* 搞点颜色 */
:target {
text-shadow: 6px 0 20px chartreuse;
}
/* 600px 以下样式 */
html {
font-family: sans-serif;
font-size: 62.5%;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 768px以上样式 */
@media screen and (min-width: 48em) {
html {
scroll-padding-top: calc(var(--wp-admin-bar-height,1px) + 48px);
}
}
/* 600px 至 768px 样式*/
@media screen and ( max-width: 48em ) and ( min-width: 37.5em ) {
html {
scroll-padding-top: var(--wp-admin-bar-height);
}
}
上面的CSS的var()函数，其中的变量值--wp-admin-bar-height。
上面的CSS的calc()函数，可用于计算哟，不错！
有空再慢慢消化一下这些对于我来说的新东西。