Theia Sticky Sidebar是款智能固定（跟随）侧边栏的jQuery插件，使用率很高。可惜该插件与高版本jQuery的兼容性欠佳，比如WP5.6自带的jQuery3.5.1，会造成Chromium核心的浏览器文字发虚模糊，比如Chrome和国内那些所谓双核浏览器，而火狐却没这个问题，查遍全网也没找到解决办法，只能自己动手研究了。
造成模糊的原因是，是Chromium核心浏览器一直存在的一个bug，当transform非整数值时就会出现模糊情况，在高版本jQuery中，插件获取的translateY高度数值不是整数，有小数位，那么就在这方面着手吧。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
通过测试解决办法很简单，利用parseInt()函数强制获取整数数值。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
具体修改方法，打开theia-sticky-sidebar.js，需要修改的地方有两处：文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
第二处找到：文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
"transform": "translateY(" + top + "px)",改为文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
"transform": "translateY(" + parseInt(top) + "px)",第二处找到：文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
css.transform = "translateY(" + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + "px)";改为：文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
css.transform = "translateY(" + parseInt(scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + "px)";只需要parseInt()将获取位置的变量包裹起来，强制获取整数值，问题解决。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
另外，使用高版本jQuery，只要有获取数值的代码，在Chromium核心浏览器中就会出现问题，可以参考上面的方法纠正。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
附Theia Sticky Sidebar基本使用方法
文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
HTML结构：
<div class="wrapper"> <div class="content"> 内容 </div> <div class="sidebar"> 内容 </div> </div>
引入JS：
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="theia-sticky-sidebar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>配置参数：
containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
updateSidebarHeight：是否更新侧边栏的高度。默认为true。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
namespace：绑定事件的命名空间。默认为TSS。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
项目地址：https://github.com/wecodepixels/theia-sticky-sidebar文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html
另一个类似的插件：https://abouolia.github.io/sticky-sidebar/
评论