问题的背景:

在手机触屏版中,当页面向上滑动的时候,导航条可以固定在顶部,通过判断offset().top的值来实现这个功能,其他的浏览器都可以,只有微信浏览器中出现问题(向上滑动的时候,导航条就会直接飘到顶部)

问题的原因:

在微信浏览器中取不到offset().top的值

解决问题的方案:

  1. /*导航固定*/
  2. $(function(){
  3. var mydiv = document.getElementById("con_tab");
  4. var mt = mydiv.offsetTop;//用原生的写法可以解决这个问题
  5. var a = $('.con_tab'),
  6. b =a.offset(),//引起问题的原因
  7. height_a = $(".con_banner").height();
  8. $(document).on('scroll',function(){
  9. var c = $(document).scrollTop();
  10. if(mt < c){
  11. $(".tab_content").css({'margin-top':'2.8rem'})
  12. a.css({'position':'fixed','top':'0px'})
  13. }else{
  14. $(".tab_content").css({'margin-top':'2.8rem'})
  15. a.css({'position':'absolute','top':height_a})
  16. }
  17. })
  18. })

实现效果

write by:  tuantuan

关于微信浏览器不支持offset()的兼容性处理的更多相关文章

  1. [Debug]IOS微信浏览器不支持form表单的target=_blank

    测试代码如下 <?php echo '<meta name="viewport" content="width=device-width,minimum-sc ...

  2. vue.js 微信浏览器不支持lambda表达式

    最近尝试在用vue重构一个微信网页,然后发现在本地测试是可以的,在微信测试工具里也是正常的,然后在手机里有人正常有人不正常,后来发现规律,微信比较新的是不支持的,微信比较旧的是不支持的.然后网上谷歌了 ...

  3. h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  4. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  5. HTML5VEDIO标签阿里云-微信浏览器兼容性问题

    在网页展示媒体对象,离不开HTML5的 audio和video对象.但这两个目前来看兼容性方面还得关注一下. 目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候,碰到了一些兼容性问 ...

  6. html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia

    以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...

  7. 用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面

    现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览器中打开,关键是可以做成微信分享朋友圈的形式,大大提高游戏的传播,增强好友的游戏互动. 微信浏览器中打开网页游戏效果还不错,对 ...

  8. [转]用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面

    FROM : http://blog.csdn.net/gavin_luo/article/details/40620217 现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览 ...

  9. ASP.NET MVC Filters 4种默认过滤器的使用【附示例】 数据库常见死锁原因及处理 .NET源码中的链表 多线程下C#如何保证线程安全? .net实现支付宝在线支付 彻头彻尾理解单例模式与多线程 App.Config详解及读写操作 判断客户端是iOS还是Android,判断是不是在微信浏览器打开

    ASP.NET MVC Filters 4种默认过滤器的使用[附示例]   过滤器(Filters)的出现使得我们可以在ASP.NET MVC程序里更好的控制浏览器请求过来的URL,不是每个请求都会响 ...

随机推荐

  1. Python学习笔记:字符串

    字符串 字符串定义:字符串可以使用一对单引号.双引号或三引号来定义,即便是单个字符也会当做字符串来处理(Python中没有字符类型,单个字符也就是只有一个字符的字符串而已). 原始字符串:字符串中反斜 ...

  2. 查看 EGLIBC 版本

    $ ldd --versionldd (Debian EGLIBC 2.13-38+deb7u1) 2.13

  3. javascript 内置日期转换方法

    var d = new Date(); console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间) console.log(d.t ...

  4. set的特性和基本用法——python3.6

    特性 无序,不重复的数据组合,用{}表示,eg:{1,2,3,4,5,6} 用途 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之间的交集,差集,并集,对称差集,包含(子集和超集,相交 ...

  5. TensorFlow——零碎语法知识点

    张量(tensor) 张量 是图中计算节点的运算结果的引用,由name,shape,type三个属性构成. 张量的命名 可以以“name:src_output”的形式给出,node为计算节点名称,sr ...

  6. P1988 最大数

    最大数 08年江苏的一道省选题. 题目描述: 用两种操作维护一个数列: 1. 查询:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 2. 插入:将n加上t,其中t是最近一次查询操作的答案(如 ...

  7. [错误处理]: How to deal with chrome failing to launch GPU process

    https://github.com/jupyter/notebook/issues/2836 "export BROWSER=google-chrome" command wor ...

  8. XDEBUG 远程调试

    我的PHP环境是安装在虚拟机中.真机系统用的是windows.那么我要用XDEBUG调试代码,就得用XDEBUG的远程调试功能. 首先要给远程环境中安装XDEBUG扩展,具体方法:http://www ...

  9. BZOJ 4555 [Tjoi2016&Heoi2016]求和 ——分治 NTT 多项式求逆

    不想多说了,看网上的题解吧,我大概说下思路. 首先考察Stirling的意义,然后求出递推式,变成卷积的形式. 然后发现贡献是一定的,我们可以分治+NTT. 也可以直接求逆(我不会啊啊啊啊啊) #in ...

  10. SVN改地址eclipse怎么同步

    步骤有3 : 首先保证:Windows-> preservences->SVN的接口Client为 1.8以上的 1 )   打开eclipse中SVN资源库 在Eclipse中选择Win ...