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

知更鸟 2021年2月3日09:11:19
评论
1771

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()将获取位置的变量包裹起来,强制获取整数值,问题解决。

 


 

附Theia Sticky Sidebar基本使用方法

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

HTML结构:

<div class="wrapper">
	<div class="content">
		内容
	</div>
	<div class="sidebar">
		内容
	</div>
</div>

引入JS:

<script type="text/javascript" src="https://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/

weinxin
版权声明
本站原创文章转载请注明文章出处
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: