关于微信浏览器不支持offset()的兼容性处理
问题的背景:
在手机触屏版中,当页面向上滑动的时候,导航条可以固定在顶部,通过判断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()的兼容性处理的更多相关文章
- [Debug]IOS微信浏览器不支持form表单的target=_blank
测试代码如下 <?php echo '<meta name="viewport" content="width=device-width,minimum-sc ...
- vue.js 微信浏览器不支持lambda表达式
最近尝试在用vue重构一个微信网页,然后发现在本地测试是可以的,在微信测试工具里也是正常的,然后在手机里有人正常有人不正常,后来发现规律,微信比较新的是不支持的,微信比较旧的是不支持的.然后网上谷歌了 ...
- h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
- 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...
- HTML5VEDIO标签阿里云-微信浏览器兼容性问题
在网页展示媒体对象,离不开HTML5的 audio和video对象.但这两个目前来看兼容性方面还得关注一下. 目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候,碰到了一些兼容性问 ...
- html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia
以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...
- 用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面
现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览器中打开,关键是可以做成微信分享朋友圈的形式,大大提高游戏的传播,增强好友的游戏互动. 微信浏览器中打开网页游戏效果还不错,对 ...
- [转]用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面
FROM : http://blog.csdn.net/gavin_luo/article/details/40620217 现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览 ...
- ASP.NET MVC Filters 4种默认过滤器的使用【附示例】 数据库常见死锁原因及处理 .NET源码中的链表 多线程下C#如何保证线程安全? .net实现支付宝在线支付 彻头彻尾理解单例模式与多线程 App.Config详解及读写操作 判断客户端是iOS还是Android,判断是不是在微信浏览器打开
ASP.NET MVC Filters 4种默认过滤器的使用[附示例] 过滤器(Filters)的出现使得我们可以在ASP.NET MVC程序里更好的控制浏览器请求过来的URL,不是每个请求都会响 ...
随机推荐
- 01windows常用命令及批处理
1. 概述 复制内容:右键弹出快捷菜单,选择"标记(K)",然后选中所需要的内容,然后右键即可 粘贴内容:右键弹出快捷菜单,选择"粘贴(P)" 命令参数的路径: ...
- CSS基础:block,inline和inline-block
css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block.inline和inline-block. HTML组件中呈现一片空白区域的组件都可当盒模型(bo ...
- 树莓派编译ncnn
1.从github上下载ncnn git clone --recursive https://github.com/Tencent/ncnn 2.在ncnn根目录下创建build目录,安装cmake编 ...
- GoF23种设计模式之结构型模式之享元模式
一.概述 运用共享技术有效地支持大量细粒度的对象. 二.适用性 1.当一个应用程序使用了大量的对象的时候. 2.由于使用大量的独享而造成很大的存储开销的时候. 3.对象的大多数状态都可变为外部状态的 ...
- java8新特性:接口的默认方法与静态方法
接口中一共可以定义三种方法: 1.抽象方法,也就是需要实现者必须实现的方法,最常见的那种 2.默认方法,不需要实现者实现 3.静态方法,不需要实现者实现 默认方法: 允许在已有的接口中添加新方法,而同 ...
- Markdown,后缀MD
Markdown 算是一门新兴语言,现在 7-8 岁了吧.它设计的初衷就是让写字的人专注于写字,用纯文本简单的符号标记格式,最后再通过工具转换成鬼畜的 HTML/XHTML.如果你玩过 wikiped ...
- 一个程序员一月的开销统计分析、(附上PC端和移动端android源码)
图片1(类别): 图片中的数据是我一月的花费统计分析. 这是该网站的地址:http://www.10086bank.com/(需要登录) 没有帐号马上注册一个吧.进入系统后点击“记一笔” 添加数据 ...
- 零基础学 HTML5+CSS3 全彩版 明日科技 编著
第1章 基础知识 1.1 HTML概述 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.2 HTML文件的基本结构 1.2.1 HTML的基本结构 1.2.2 HTML的基本标记 1. ...
- python安装和eclipse安装及环境变量配置
非常好的技术文档,链接如下: http://jingyan.baidu.com/article/eb9f7b6da950c4869364e8f5.html 感谢作者的分享 http://python. ...
- [python篇] [伯乐在线][1]永远别写for循环
首先,让我们退一步看看在写一个for循环背后的直觉是什么: 1.遍历一个序列提取出一些信息 2.从当前的序列中生成另外的序列 3.写for循环已经是我的第二天性了,因为我是一个程序员 幸运的是,Pyt ...