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

知更鸟 2021年2月3日09:11:19Web前端评论3051阅读模式

Theia Sticky Sidebar是款智能固定(跟随)侧边栏的jQuery插件,使用率很高。可惜该插件与高版本jQuery的兼容性欠佳,比如WP5.6自带的jQuery3.5.1,会造成Chromium核心的浏览器文字发虚模糊,比如Chrome和国内那些所谓双核浏览器,而火狐却没这个问题,查遍全网也没找到解决办法,只能自己动手研究了。文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html

造成模糊的原因是,是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基本使用方法

Theia Sticky Sidebar与高版本jQuery的兼容性文章源自知更鸟-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/文章源自知更鸟-https://zmingcx.com/on-the-character-of-theia-sticky-sidebar-chrome.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
CSS3 水平垂直居中 Web前端

CSS3 水平垂直居中

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。 CSS3 水平垂直居中 translate()是css3的新特性,在不知...
animation动画复合属性 Web前端

animation动画复合属性

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

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

发表评论

匿名网友

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

确定