在iOS上折叠Safari导航栏时保持元素不变
，可以通过使用CSS的position: fixed属性来实现。当导航栏折叠时，固定定位的元素将保持在屏幕上的固定位置，不受导航栏的影响。
具体步骤如下：
- 首先，给需要保持不变的元素添加一个CSS类，例如
fixed-element。.fixed-element { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }这将使元素固定在屏幕顶部，并覆盖在其他内容之上。 - 在CSS文件中，为该类添加如下样式：
- 在HTML文件中，将需要保持不变的元素添加相应的类名：<div class="fixed-element"> <!-- 元素的内容 --> </div>这样，在iOS上折叠Safari导航栏时，该元素将保持在屏幕顶部不变。
推荐的腾讯云相关产品：腾讯云移动应用分析（MTA）
腾讯云移动应用分析（Mobile App Analytics，MTA）是一款专注于移动应用数据分析的产品。它提供了全面的移动应用数据统计和分析功能，帮助开发者深入了解用户行为、应用使用情况和性能状况，从而优化产品和提升用户体验。MTA支持iOS、Android等多个平台，提供了丰富的数据指标和分析报告，帮助开发者实现数据驱动的决策和持续优化。
注意：以上答案仅供参考，具体实现方式可能因具体情况而异。
相关·内容
此布局使用左侧的固定导航栏，宽度为100%。这在大多数情况下都工作得很好。
(请注意，文本延伸到导航栏</e
浏览 24提问于2017-07-05得票数 0
回答已采纳
1回答
在我的页面中，我使用的是左侧导航栏，所以当我展开和折叠导航栏时，其中一个div宽度会发生变化。由于这一变化，整个设计也发生了变化。当导航栏折叠时
当展开导航栏时所以我想在导航栏展开或折叠</em
浏览 2提问于2018-10-09得票数 0
问题:当点击导航栏条目(was / wieviel / wann / wo / wer)时，网站跳到了一个错误的位置。当浏览器窗口太宽时，和的导航条是而不是折叠的。此问题出现在上，而不是，因为：( b)我的Mac上的Chrome (32.0.1700.102)
浏览 5提问于2014-02-13得票数 0
我有一个响应式的nav元素。nav为position:fixed。当点击它时，它有高度(我也尝试过高度:100%) left:0 and right:0。因此，导航元素覆盖了整个屏幕。然而，在移动设备上，如果我向下滚动，浏览器地址栏(我的iPhone上的Safari和Chrome )会变短或全部消失-使视窗变得更高。然而，导航元素的高度保持不变，这意味着它不再覆盖
浏览 4提问于2018-07-05得票数 1
1回答
创建导航栏的自定义实现
、、、、
我不能简单地自定义工具栏，因为我想要更高的空间，我想在它上面有几个其他的子视图，而不仅仅是UIBarButtonItems。所以，我希望能够创建一个类似的实现，包括浮动/半透明效果。一个很好的例子就是iOS 7中Safari的地址栏，地址栏上的UITextField是不能添加到默认UINavigationBar上的。尽管如此，Safari栏仍然具有透明性。我不希望它像Safari中那样向下滚动时</
浏览 4提问于2014-01-11得票数 0
我已经在我的站点中实现了自定义触摸行为，并且我使用来防止浏览器处理用户手势。
问题是，当用户使用touch-action: none在元素上上下滑动时，Safari将折叠并扩展其底部的地址栏。内容没有滚动，这是预期的行为，但地址栏改变了它的状态，而不是。这也会调整屏幕大小，导致布局移位和resize事件侦听器触发，并破坏用户体验。Chrome，像Safari一样，在底部也有一个UI条，当页面上下滚动
浏览 21提问于2022-04-02得票数 8
4回答
如何防止大标题的崩溃
、、、、
问题很简单，当滚动视图向下滚动时，如何防止大标题导航栏折叠？ self.navigationBar.addSubview(topMenu)
浏览 2提问于2018-06-19得票数 13
3回答
iOS8上新的固定位置错误
、、、、
我有一个固定的标题和滑出侧栏的网站。在纵向的iOS7中，当侧边栏可见时，固定的标题保持不变，但在iOS8上，标题会稍微向上推动，这取决于您向下滚动的程度。我需要把它修好。查看jsbin：侧边栏固定在屏幕的左侧，最初是通过向左平移自身宽度来
浏览 0提问于2014-10-16得票数 9
1回答
我在iOS safari上有一个固定的导航的小问题。nav在台式机上运行良好，但当我在IOS设备上查看它时，它就有点时髦了。
在纵向视图中，它看起来/工作正常。当我把手机放在风景模式下时，固定的导航效果很好，直到我开始滚动。当我开始滚动导航按钮时，打开导航的按钮失去了焦点。好的，整个导航系统保
浏览 0提问于2015-03-17得票数 0
1回答
我在一个网站上使用Skel.js和Skel-layers.js，我正在开发一个修改过的HTML5Up模板：HTML结构和JS是相同的。CSS中的所有更改都没有我所发现的影响。我一直在删除style-mobile.
浏览 14提问于2015-05-05得票数 2
回答已采纳
我一直在尝试一些类型的“标题”，当用户向下滚动时，它被贴在顶部。然而，你会注意到，当向下滚动时，"POST 1“会突然跳到页面的顶部。
浏览 5提问于2012-11-24得票数 6
回答已采纳
我希望在不改变导航栏高度的情况下，将导航栏的品牌图像与导航栏重叠(导航栏的固定高度为80px)。它有点工作，但是我不能让图像完全曝光，它是在顶部被剪切的。在屏幕小于md的设备上，重叠的图像被隐藏，另一个图像被显示，现在应该是img-fluid，并将其大小调整为导航栏的大小。然而，当调整屏幕大小以使导航栏
浏览 0提问于2019-02-11得票数 0
1回答
固定位置的元素在页面卸载时消失。
、、、、
我有一个固定的顶部导航栏，当页面的内容被滚动时，它将保持在所有内容的顶部。我注意到，在Chrome for iOS和Safari独立模式中，固定条在页面卸载之前消失在任何其他元素之前。如何使所有的元素，不管定位，同时消失？
演示：在Chrome中加载页面，反复单击刷新。首先观察固定的div是如何消失的，然后是内容的其余部分，最后是页面被重绘。
浏览 2提问于2015-05-07得票数 2
回答已采纳
试图让我的导航栏保持在ipad大小。我使用了这里的代码： .navbar-collapse.collapse.in {
display: block!因此，我尝试在代码的第一部分添加collapse.in，其中.navbar-col
浏览 2提问于2017-01-22得票数 0
1回答
当我的应用程序加载时，我很难让UIToolbar出现在屏幕的底部。不管我如何定位UIToolbar，也不管我在条形图上设置了哪些约束，它总是出现在屏幕的中间。我的导航栏位置正确，我以前在IB中放置UI元素从来没有遇到过问题(尽管我对iOS编程还不熟悉)。对于如何确保工具栏保持不变，有什么想法吗？谢谢。
浏览 5提问于2015-08-04得票数 2
回答已采纳
我有一个折叠的工具栏布局，如下所示： android:id="@+id展开折叠工具栏时，圆形图像视图可见，并显示如下所示：折叠时，图像视图不再可见，如下所示：但是，即使在折叠状态下，图像视图的可见性仍然设置为可见。当用户按后退按钮时，我需要确定图
浏览 5提问于2016-05-01得票数 2
回答已采纳
4回答
我有一个网站，有一个固定的导航栏，我想使用Zurb Joyride附加提示到导航栏中的元素。问题是，当页面滚动时，导航栏保持不变，但工具提示不会。我尝试将工具提示附加到导航栏中的元素(而不是body)，但我遇到了奇怪的呈现问题。在包含提示的div上设置position: fixed似乎是有效的，但我想知道是否有一种简单的方法来通
浏览 0提问于2013-07-03得票数 4
回答已采纳
我有以下情况：
我在视图上添加了两个表视图。两者都将所有约束设置为所有边(上、左、右、下)。一个在开始时隐藏，另一个不隐藏。我已经在导航栏titleView中放置了分段控件，点击分段控件项目会触发一个表视图隐藏，另一个表视图显示。一切都很好，但在iOS11上，当有大标题时，导航栏只想滚动和折叠层次结构中的第一个表视图，而当我将片段更改为其他表视图时</em
浏览 1提问于2018-04-21得票数 0
1回答
最近我们发现了一些问题，有时我们的网页在iOS上崩溃。这在Chrome和Safari中都有发生。有没有人知道如何调试它，或者它为什么会发生？
它很难复制(实际上是在一些我们无法复制的手机上)。
浏览 1提问于2016-06-29得票数 1
我有一个固定在页面顶部的元素，当您水平滚动时，CSS非常简单： position: fixed; width: 100%; text-align: right;你可以在这里看到它：
在大多数浏览器上工作良好，但是在iOS 8上使用Safari，这个栏不是100%(在iOS 7<e
浏览 3提问于2015-03-30得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
