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

知更鸟
知更鸟
知更鸟
1632
文章
6929
评论
2021年2月3日09:11:19
评论
1101

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前端

大自然的配色

配色是一门高深的艺术和学问,网上有很多将一些色块组合成各种色系的配色表,再冠以为什么清新、明快、时尚、稳重的名称,其实都是胡扯,你说这个配色非常高雅、明快,别人可能认为是土气、花哨,个人喜好不同,不能...
禁止查看网页源代码方法 Web前端

禁止查看网页源代码方法

总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。 禁止查看网页源代码方法 一般常用的方法是在网页中加上类似的JS代码,屏蔽屏蔽键盘和鼠标右键。 docume...
匿名

发表评论

匿名网友

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