位置: 编程技术 - 正文

移动端jQuery修正Web页面滑动时div问题的两则实例(jquery修改css)

编辑:rootadmin

推荐整理分享移动端jQuery修正Web页面滑动时div问题的两则实例(jquery修改css),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery修改值,jquery修改,jquery修改css,jquery修改css,jquery怎么修改样式,jquery修改,jquery移动版,jquery修改css,内容如对您有帮助,希望把文章链接给更多的朋友!

顶部固定时划屏出现闪动头部是一个普通的div,高度是,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动。出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验。解决方法一:之前的做法:

这样做手机网站中会出现明显的闪动效果!改进之后的做法:

这样做滑动的时候,有个向上的动画效果,不会出现闪动!解决方法二:思路:顶部固定的地方,一开始和上面不固定的地方是一体的,不写position:fixed,当要固定的div的offset比scrolltop小的时候,让其固定。(我之前之所以没有用这个方法,是因为整个页面在ios中要引用,当在ios中的时候,头部不出现。)代码如下:

menuinfo的样式如下:

移动端jQuery修正Web页面滑动时div问题的两则实例(jquery修改css)

表层div滑动、导致底层body滑动body很长,可以滑动,body头部有一个模拟下拉的选择框。下拉选择有滚动轴,如下图。

我给body一个overflow:hidden和高度是没有用的。手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以。关于preventdefault和stopPropagation,后面有时间会讲解其区别。解决方案:我经过反复测试,发现滚动轴滚到底部的时候,会触发body的滑动,那么我就在事件滚到底部的时候对表层的div做一个touchmove的阻止。到达滚动轴底部,向下滑动,阻止事件,向上滑动,开启事件。为此就要判断touchmove的方向了。

上面的方法是判断touchmove的滑动方向。

jQuery中的通配符选择器使用总结 jquery选择器中的通配符经常用到,大致的用法总结如下:$("input[id^='code']");//id属性以code开始的所有input标签$("input[id$='code']");//id属性以code结束的所有inpu

jquery 无限极下拉菜单的简单实例(精简浓缩版) jquery无限极下拉菜单的简单实例(精简浓缩版)!doctypehtmlhtmlheadmetacharset="utf-8"metaname="viewport"content="width=device-width"title积木网www.gimoo.net/titlescripttype="text/javas

jQuery基础知识点总结(必看) jQuery是一个优秀的、轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使

标签: jquery修改css

本文链接地址:https://www.jiuchutong.com/biancheng/387352.html 转载请保留说明!

上一篇:jQuery增加和删除表格项目及实现表格项目排序的方法(jquery增加一行和删除)

下一篇:jQuery中的通配符选择器使用总结(jquery通配符选择器)

  • 由旅行社开具的电子普票代订机票能抵扣税吗?
  • 土地增值税计入税金及附加吗
  • 公司主营销售墓地合法吗
  • 合伙律师事务所的合伙人必须是
  • 一般纳税人附加税减免政策2023
  • 农民合作社交哪些税
  • 股东借款超过一年个人所得税
  • 计提房产税计入哪个科目
  • 餐饮业购买餐桌椅会计分录
  • 汇算清缴退税现金流量表
  • 个人去税务局开劳务票 税点是多少
  • 预提工程成本的会计分录
  • 研发费用如何分摊到多个项目的建议
  • 利息收入记账凭证格式范本
  • 雇主责任保险
  • 企业的污水处理设备可以间断性运行么
  • 总账每个月都要结账吗
  • 其他应收款怎么冲平
  • 工商年报网上申报时间2023年
  • php23种设计模式
  • php integer
  • 销售合同怎么计提折旧
  • ensmix32.exe进程安全吗 ensmix32进程是什么文件产生的
  • 期末结转之前有哪些注意事项
  • 出口增值税怎么计算公式
  • 圣米厄尔教堂
  • 海岸边上
  • 广告代理费收取比例
  • vue3父子组件传递数组通信
  • 老板的财务
  • 织梦如何添加浮动广告
  • php网站根目录
  • 转让债券应交的增值税税额
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • 分页存储的优缺点
  • 投资收益会计科目账务处理
  • 上个月计提多了,这个月怎么办?
  • 收到银行退回的手续费怎么做会计分录
  • 手工账本应付账款怎么做
  • 房产公司增值税专用发票
  • 固定资产计提完折旧报废的账务处理
  • 出口确认收入的时间
  • 接受捐赠后怎么发表感言
  • 给员工家人报销会计分录
  • 公司场地租赁交什么税
  • 最新职工福利费列支范围
  • 出纳记帐凭证
  • 银行信贷人员岗位职责
  • mysql优化步骤
  • sql触发器语句
  • mysql.sock在哪里
  • 动态创建表
  • VMWare linux mysql 5.7.13安装配置教程
  • 微软警告:64位Win7系统或无法安装KB3033929补丁更新
  • 生成系统健康报告怎么弄
  • youphone.exe是什么
  • win8显示屏亮度调节
  • windows8.1关闭开机密码
  • windows10 14393版本
  • 电脑系统脚本错误
  • 跑跑3s是谁
  • cocoswot
  • 学习ExtJS fit布局使用说明
  • android adapter
  • perl读取文件内容
  • unity怎么用
  • prize draw是什么意思
  • jquery倒计时60秒
  • javascriptz
  • android sdk loader的问题
  • jquery使用什么方法隐藏元素
  • 噩梦 1-4
  • javascript create
  • 湖北电子网上税务怎么交
  • 东莞网上办税服务厅
  • 江苏电子税务局网站官网
  • 发票汇总表怎么计算
  • 汽车销售流程有哪些环节?每个环节的主要内容是什么?
  • 新乡市国家税务局刘磊
  • 湖南电子税务局网上办税大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设