下面的简单页面有一个固定标题栏的位置,在大多数浏览器中工作正常等.但是在谷歌浏览器的iOS上,如果你在页面上下滚动,最终标题栏会向下移动一点,就像下面的屏幕截图一样.

任何想法如何解决？

谢谢 ：)

position test

Fixed header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.

Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.

Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.

Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.

Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta aliquet dictum. Aliquam massa libero, consectetur et purus sed, luctus porttitor ligula. Phasellus tempus risus at elit sagittis, sed tincidunt erat rutrum. Donec non dictum turpis. Vestibulum sapien tellus, tincidunt sed ex a, pretium facilisis est. Suspendisse potenti. Fusce laoreet turpis turpis, a rhoncus diam fringilla ac. Proin turpis arcu, hendrerit viverra neque quis, placerat tempor ligula. Duis ut scelerisque ante. Etiam posuere est ut molestie fermentum. Sed feugiat tortor at libero ultrices, vitae consectetur nibh luctus.

Sed nulla enim, tincidunt non laoreet quis, congue aliquam nisl. Sed dapibus in erat cursus rutrum. Nullam efficitur sem ipsum, vitae sagittis est tristique vitae. Ut dignissim est eget nisi condimentum posuere. Duis nec neque tempor, finibus sem sed, varius risus. Nullam convallis imperdiet sem vel sagittis. Nulla ultricies sagittis vestibulum. In semper ante ipsum, ac dignissim diam bibendum et. Nam in sapien sem.

Phasellus neque nibh, pharetra ac dui et, iaculis lacinia ipsum. Phasellus laoreet eros ut lectus viverra dictum. Mauris vitae neque maximus, hendrerit enim gravida, ornare magna. Sed rhoncus vitae nunc sed iaculis. Donec vitae enim ut enim fermentum scelerisque. Nulla ut vestibulum leo. In ut urna in neque tempor maximus non et massa. In eu tincidunt quam. Donec eu lectus vehicula, consequat enim et, porttitor libero. Phasellus magna tellus, rhoncus non quam vitae, congue sagittis nunc. Mauris bibendum ultrices arcu a lobortis. Aliquam erat volutpat. Ut quis mi sit amet nulla tincidunt tincidunt.

Nam at interdum nulla, eget ultricies libero. Suspendisse est elit, malesuada sit amet hendrerit nec, posuere et purus. Vivamus sed eros ut nisi cursus hendrerit. Curabitur vel lacus maximus, tempus nulla sed, volutpat risus. Etiam in blandit quam. Nullam lacinia neque eu ligula lobortis facilisis. Quisque ipsum erat, iaculis vitae nunc vitae, egestas feugiat enim.

Fusce consectetur leo in est sodales, ut congue est commodo. Donec cursus odio sapien, id malesuada sem dictum eget. Sed sit amet sodales nisl, sed venenatis tortor. Nulla facilisi. Maecenas maximus tortor sed nisi mattis luctus. Proin id diam sagittis ante pulvinar dictum. Donec volutpat nec nibh eget dictum. Donec tellus turpis, hendrerit et risus sed, viverra porttitor leo. Pellentesque non vulputate arcu, eget finibus tortor.

html标题栏置顶,html – 当你滚动时,顶部标题栏的位置固定在iOS chrome上相关推荐

  1. CoordinatorLayout + AppBarLayout 实现标题栏置顶

    哎呀,开篇也不知道说点什么好.这里整理的是一个详情界面的效果,我就直接贴图了. 因为前段时间项目中需要这种效果,之前看过 鸿洋大神写过的一个 360详情界面效果,也下载了源码,做了一些尝试,然而感觉太 ...

  2. vue 滑动置顶功能_VUE 实现滚动监听 导航栏置顶的方法_蜡烛_前端开发者

    非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下 1. data () data () { paddingBottom: '1.5rem', // 给最外层div一个padding- ...

  3. html中如何使标题栏置顶,html5 底部固定且等分的切换栏+顶部固定的标题栏实现方式...

    LSK 返回 孙悟空 设置 truesrc="big.png"/> 活动介绍: 莎诗特女鞋特惠 3折封顶 首页帮助中心反馈建议 css: .page-title{ line- ...

  4. html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...

  5. android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示

    最近在使用uniApp做一个模仿美团小程序的demo,其中遇到这样一个需求,就是筛选模块滚动到顶部就置顶显示 查阅了uniApp的官方文档以及微信小程序的官方文档,发现都有一个相同的API,如下: 实 ...

  6. 【QT学习】如何隐藏标题栏、任务栏图标及子窗口置顶？（附常用窗口标志）

    文章目录 前言 一.标题栏隐藏 二.子窗口置顶 三.任务栏图标隐藏 四.单击任务栏图标显示(隐藏)窗口 附:QT常用窗口标志 总结 前言    本篇,将介绍如何隐藏窗口标题栏.任务栏图标以及子窗口置顶 ...

  7. HTML如何保持标题栏置顶上

    1.标题栏置顶并固定 position:fixed; 1 定义和用法: position 属性规定元素的定位类型. 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标. 可能的值 可 ...

  8. 什么软件可以将win窗口进行置顶_电脑极简指南，这5个方法可以帮你节约生命...

    1.阅读本文预计需要 10 分钟,并提供了资源下载.2.本文是「电脑爱好者」专题C09篇的更新版本.3.第一时间获取更新,欢迎关注「奔跑中的奶酪」. 导读 北方的朋友可能不知道,在南方的菜市场,如果你 ...

  9. 点击置顶按钮页面置顶到指定位置

    列子: <!--顶部--><div id="top"></div> <!--置顶按钮(需要将按钮移到指定位置,这里没有加样式了)--> ...

最新文章

  1. AI圈真魔幻！谷歌最新研究表明卷积在NLP预训练上竟优于Transformer？LeCun暧昧表态...
  2. WebService入门详解
  3. 这个外挂要上天了！教一千遍都不会的数理技巧，还不如搞懂最根本的概念！
  4. 检测Java Web应用程序而无需修改其源代码
  5. SQL SERVER 2008 中分页方法
  6. 《iOS编程指南》——导读
  7. Docker学习总结（37）——Dockerfile编写的八条准则
  8. 项目管理工具Redmine各功能测试
  9. CenOS 6.5 RPM 安装 elasticsearch 6.3.1
  10. FPGA的学习历程-入门篇
  11. visio 2016插入origin 2020 导出的图片是黑色
  12. 高版本linux安装gamit,Linux下安装GAMIT10.5
  13. JPA--动态查询--Example
  14. PROE 齿轮设计视频教程+直齿 斜齿 人字齿 内外啮齿 行星齿
  15. 【JavaScript】制作日历
  16. 【HTML 5】HTML5 Canvas rect(), strokeRect() 和 fillRect() 的区别
  17. 【现已失效】【转载】QQ空间一键点赞方法
  18. 简智音科技：抖音短视频账号限流后的解决方法
  19. Python学记(三)turtle库
  20. 离子交换树脂过滤重金属

热门文章

  1. 8 年经验面试官解读程序员的技能瓶颈，以及突破瓶颈的忠告 | CSDN 博文精选
  2. 揭秘支撑双 11 买买买背后的硬核黑科技！
  3. 不敌 Java、C/C++、Python，28 岁 VB 究竟输在了哪？
  4. 面试总是死在网络协议，我该怎么办?
  5. 一根烟上热搜，先让 AI 看看你的肺
  6. 2019 年，开发者如何占领快应用技术风向的高地？
  7. 为什么大公司一定要使用 DevOps?
  8. 谷歌安卓之父离职内幕；抖音上线小程序；苹果被罚千万 | 极客头条
  9. Github 用户喊话微软：放弃 ICE 吧，不然会失去我们的
  10. 树莓派python gpio 模仿iic_树莓派高级GPIO库，wiringpi2 for python使用笔记（五）i2c读取测试...