Theia Sticky Sidebar与高版本jQuery的兼容性

Theia Sticky Sidebar是款智能固定（跟随）侧边栏的jQuery插件，使用率很高。可惜该插件与高版本jQuery的兼容性欠佳，比如WP5.6自带的jQuery3.5.1，会造成Chromium核心的浏览器文字发虚模糊，比如Chrome和国内那些所谓双核浏览器，而火狐却没这个问题，查遍全网也没找到解决办法，只能自己动手研究了。

造成模糊的原因是，是Chromium核心浏览器一直存在的一个bug，当transform非整数值时就会出现模糊情况，在高版本jQuery中，插件获取的translateY高度数值不是整数，有小数位，那么就在这方面着手吧。

通过测试解决办法很简单，利用parseInt()函数强制获取整数数值。

具体修改方法，打开theia-sticky-sidebar.js，需要修改的地方有两处：

第二处找到：

"transform": "translateY(" + top + "px)",

改为

"transform": "translateY(" + parseInt(top) + "px)",

第二处找到：

css.transform = "translateY(" + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + "px)";

改为：

css.transform = "translateY(" + parseInt(scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + "px)";

只需要parseInt()将获取位置的变量包裹起来，强制获取整数值，问题解决。

另外，使用高版本jQuery，只要有获取数值的代码，在Chromium核心浏览器中就会出现问题，可以参考上面的方法纠正。

附Theia Sticky Sidebar基本使用方法

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：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

additionalMarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。

additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。

updateSidebarHeight：是否更新侧边栏的高度。默认为true。

minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计）

defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。

namespace：绑定事件的命名空间。默认为TSS。

项目地址：https://github.com/wecodepixels/theia-sticky-sidebar

另一个类似的插件：https://abouolia.github.io/sticky-sidebar/