问题的背景:

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

问题的原因:

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

解决问题的方案:

/*导航固定*/
$(function(){
var mydiv = document.getElementById("con_tab");
var mt = mydiv.offsetTop;//用原生的写法可以解决这个问题
var a = $('.con_tab'),
b =a.offset(),//引起问题的原因
height_a = $(".con_banner").height();
$(document).on('scroll',function(){
var c = $(document).scrollTop();
if(mt < c){
$(".tab_content").css({'margin-top':'2.8rem'})
a.css({'position':'fixed','top':'0px'})
}else{
$(".tab_content").css({'margin-top':'2.8rem'})
a.css({'position':'absolute','top':height_a})
}
})
})

实现效果

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. LeetCode1089复写零

    问题: 给你一个长度固定的整数数组 arr,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移. 注意:请不要在超过该数组长度的位置写入元素. 要求:请对输入的数组 就地 进行上述修改,不要 ...

  2. DNS预解析 dns-prefetch

    1.DNS 是什么? Domain Name System,域名系统,作为域名和IP地址相互映射的一个分布式数据库. DNS大家都懂,那么浏览器访问域名的时候,是需要去解析一次DNS,也就是把域名 g ...

  3. PTA 7-2 符号配对

    直接用栈模拟即可,数组可做,但因为这节数据结构是栈,为了期末考试还是手写一下栈的操作,值得注意的是,这道题用gets函数在PTA上会编译错误,用scanf("%[^\n]", st ...

  4. Android开发——Android 6.0权限管理机制详解

    .Android 6.0运行时主动请求权限 3.1  检测和申请权限 下面的例子介绍上面列出的读写SD卡的使用例子,可以使用以下的方式解决: public boolean isGrantExterna ...

  5. luogu1262 间谍网络

    贿赂所有能贿赂的,如果还有人不被访问则显然是NO. 否则,必定为YES.强联通分量缩成一个DAG,若某点的入度为零,则答案要算上它的. #include <iostream> #inclu ...

  6. Jeddict:从服务器的验证过程,思考学习新事物的套路

    结合一路研究Jeddict使用的过程经验来看,在这里说一下关于服务器配置的东西.在我们团队,最开始用这个插件的时候,因为公司用的应用服务器是Jboss EAP 7,所以,我们自然而然的,想当然的直接使 ...

  7. 九度oj 题目1460:Oil Deposit

    题目描述: The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. ...

  8. ckecked Exception和Unchecked Exception异常

    Throwable 是所有 Java 程序中错误处理的父类 Error JVM Exception 程序 Checked Exception:继承java.lang.Exception 代表程序不能控 ...

  9. 设计模式(二 & 三)工厂模式:3-抽象工厂模式

    什么是抽象工厂? 抽象工厂模式,引入了“产品族”的概念. 何为产品族?还是以 设计模式(二)工厂模式:2-工厂方法模式 提到的 Operation 为例. 之前讨论的都是局限于 Operation 这 ...

  10. kb-07线段树-08--区间开根

    /* hdu-4027 题目:区间开根求和查询: 因为是开根,所以要更新的话就要更新到叶子节点.如果区间里全是1或是0的话就步用继续更新了,查询的时候正常查询: */ #include<iost ...