问题的背景:

在手机触屏版中,当页面向上滑动的时候,导航条可以固定在顶部,通过判断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. 单例模式的几种实现-Java版

    目录 关键点 饿汉式 懒汉式 双检锁 静态内部类单例模式 枚举方式 关键点 私有化构造器 通过静态方法或枚举返回单例类对象 确保单例类对象只有一个,尤其在多线程环境下. 确保每个类被序列化不会重新创建 ...

  2. request response cookie session

    request 1. url传递参数 1)参数没有命名, 如: users/views def weather(request, city, year): print(city) print(year ...

  3. ROM,PROM,EPROM,EEPROM及FLASH存储器的区别

    在微机的发展初期,BIOS都存放在ROM(Read Only Memory,只读存储器)中.ROM内部的资料是在ROM的制造工序中,在工厂里用特殊的方法被烧录进去的,其中的内容只能读不能改,一旦烧录进 ...

  4. dedecms 建站相关问题

    1.栏目新建文章提示:模板文件不存在,无法解析文档! 解决方法:把模板文件使用".html"的格式 /include/arc.archives.class.php 556行 if ...

  5. java基础语法中容易出错的细节

    1 java中的数字默认类型为int **容易出现类型转换错误 long 定义的数字后面必须有 “l” “L” float 定义的数字后面必须有 “f” “F” java中比int表述范围大的数,不会 ...

  6. Spring学习总结(20)——Spring加载多个项目properties配置文件问题解决

    多数的鲜为人知方法都是因为有着罕见的应用,就比如说Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spri ...

  7. Python3下基于bs4和sqlalchemy的爬虫实现

    本文来自网易云社区 作者:王贝 小学生现在都在学python了,作为专业程序员当然不能落下了,所以,快马加鞭,周六周末在家学起了python3,python3的基本语法比较简单,相比于Java开发更加 ...

  8. python + selenium - selenium简介

    1. 产品简介 selenium 是 基于 web网页的UI自动化测试框架. 1)支持多浏览器操作:ie.chrome.firefox.edge.safaria等 2)跨平台:windows.linu ...

  9. Collection类及常用API

    Collection类及常用API Collection—类集工具类,定义了若干用于类集和映射的算法,这些算法被定义为静态方法,具体查看api文档; a)  public static void so ...

  10. java中equals和hashCode方法随笔二

    前几天看了篇关于java中equals和hashCode方法的解析 1.Object类中的equals方法和hashCode方法. Object类中的equals和hashCode方法简单明了,所有的 ...