个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
24
4
我的网页有一个固定位置的标题栏。当您滚动时，内容将使用 z-index 位于标题栏下方。单击内容区域中的 block 将切换其颜色。单击标题中的任意位置不应触发 block 的事件处理程序。
但这在 iOS7 Safari 上不起作用。点击标题使 block 改变颜色。当我搜索互联网时，它似乎是 iOS7 的错误。试过 window.scrollTo(0,0) 和额外的 20px 东西，没有帮助。
有趣的是，我在 iOS7 移动版 Safari 上的 Yahoo Finance 和 Yahoo Sport 网络应用程序上注意到了同样的问题，它们也有固定的标题。
有人知道一个好的解决方案吗？
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<style>
header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
background: grey;
width: 100%;
height: 50px;
}
.content {
z-index: 1;
margin-top: 60px;
}
.block {
background: red;
height: 150px;
margin: 4%;
}
.block.green {
background: green;
}
</style>
</head>
<body>
<header>
Fixed positiond header.
</header>
<div class="content">
<p>On iOS Safari, scroll the blocks below the header, tap the header on the top edge to let the address bar appear. Then tap anywhere in the header, you will see block toggling colors.
</p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(document).ready(function() {
$(".block").on("click", function() {
$(this).toggleClass("green");
});
});
</script>
</body>
</html>
最佳答案
这看起来确实是一个错误，或者至少是 iPad 上的 Safari 处理此问题的方式中的一个怪癖。对于解决方法，似乎如果您将 onclick 事件处理程序添加到 header ，它就可以解决问题:
<header onclick="">
如果您喜欢这种方法，您也可以使用 jQuery 添加一个。
关于iOS7 Safari : tapping on fixed positioned header bar with higher z-index triggers event handler of the element underneathe it，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20255247/
24
4
0
我刚开始使用 html5 和 css，我对使用 css position 有点困惑。 我可以从堆栈溢出中找到这些链接， Difference between relative and absolute
我想知道是否有一种方法可以获得相对定位的元素的“绝对位置”。我想不出任何方法，但也许有人想出了一个方法...... 最佳答案 我不确定“绝对位置”是什么意思，但您可以使用 el.getBounding
基本上我的 HTML(使用 Bootstrap 类)中有一个页面，其中包含使用 thumbnail 和 caption 类展示的产品。在产品图片上方有一个 ON SELL(圆形红色标签)。我给这个红色
当我使用 BaseAdapter 的 ListView 离开屏幕时，每一行不再保持连续的位置。除了这个我不知道还能怎么解释。 如果我的 BA/LV 在屏幕上显示 4 个项目，并且我添加了一个显示每一行
此 HTML 无法在 IE8 中正确呈现。它适用于 Firefox、Opera、IE7、IE9 和 IE10。 (当然，它在 IE6 中也不起作用，因为它涉及固定位置的元素。) 实际上它在 Chrom
我正在使用Position Absolute的表单验证引擎。 我有一个特定的验证案例，希望可以为我解决。我需要能够根据另一个字段的值来使一个字段成为必需。 例如: If country.dropdow
我看过很多帖子，人们希望将相机位置调整到屏幕位置。我的问题是如何做相反的事情。 我目前想要实现的是将“门”位置设置为屏幕的百分比，此计算已准备就绪，并且我确实有最终屏幕的 X、Y (px) 位置。相机
谁能解释一下使用 position:relative、position:absolute 和 float 对正常文档流及其子项的影响的区别？ 例如当我有三个元素 A、B、C 时，其中 A 是包含 B
我有以下代码: .tabs{ position: fixed; top:110px; left:0px; width:40px; z-inde
我不知道如何表达这个问题。 所以这是一个例子。 图层上的动画滑入 View ，然后稍微弹回。 十分简单。 位置关键帧看起来像这样: 关键帧 0:(-100,200) 关键帧 10:(100,200)
我是 XSLT 的新手，我正在使用 w3schools 的“自己尝试”页面进行一些测试。我正在使用以下演示: http://www.w3schools.com/xsl/tryxslt.asp?xmlf
我试图让一个对象 1 (SKSpriteNode) 在某个高度(y 坐标)处创建另一个对象 (object2)。我已经得到了我需要的所有代码，除了我不知道如何正确编写: object1.positio
.special p { display:none; } .special:hover p { display:block; } Things
当将一个绝对定位元素放置在一个位置固定包装器中时，在一个位置相对包装器中，绝对元素位置不应该相对于相对 parent 而不是固定 parent ？ Content
我有一个 iframe，它在应用 css 后显示谷歌地图 position: relative; top: 48px; left: -233px; 但是当我向下滚动时，它刚好出现在显示 khaleej
我在一个网站上工作，有一个带有 position:relative 的父元素，它有一个带有 position:absolute 的子元素。令我感到奇怪的是，对于我提到的位置，子元素似乎仍然可以识别它们
我有一个 main 元素，我已将其设置为 position: relative。这包含两个 div，然后我在其上应用 position: absolute。然后，这会导致夹在 main 元素中间的页眉
HTML 代码由一个 div 组成，它具有两种类型的类:“隐藏”和“保留”。 Lorem ipsum dolor sit amet, consectetur adipis
我必须开发一个生成表格(有点……)的软件，并且必须提供对元素位置的完全控制。 到目前为止，我们有这样的构造: 还有一些javascript代码来放置#a , #b和 #c #co
我尝试将 z-index 设置为 body 下的某些位置为 fixed 的元素 示例如下: HTML menu content ....
我是一名优秀的程序员,十分优秀！