Javascript 标题更改位置:[固定]在Ipad键盘弹出后
我正在Ipad上测试我的应用程序,我面临的问题是,我在表单上向下滚动,我的顶部标题栏是Javascript 标题更改位置:[固定]在Ipad键盘弹出后,javascript,html,css,ipad,Javascript,Html,Css,Ipad,我正在Ipad上测试我的应用程序,我面临的问题是,我在表单上向下滚动,我的顶部标题栏是固定的,所以当我点击文本框时,它也会向下导航,然后顶部标题栏隐藏,我的侧边栏(与标题相同)也会向上滚动。有什么解决方案吗问题。我发现了很多文章,但大多数都是黑客的一种,这是不好的未来前景,所以任何好的解决方案,这将是巨大的帮助 .headbar{ top:0; position:fixed; width:100% } .siderbar { top:50px; position:fixed;
固定的
,所以当我点击文本框
时,它也会向下导航,然后顶部标题栏隐藏,我的侧边栏(与标题相同)也会向上滚动。有什么解决方案吗问题。我发现了很多文章,但大多数都是黑客的一种,这是不好的未来前景,所以任何好的解决方案,这将是巨大的帮助
.headbar{
top:0;
position:fixed;
width:100%
}
.siderbar {
top:50px;
position:fixed;
width:200px;
}
}如果没有更多的信息,很难给出答案 您是否在页面上使用JQuery?如果是这样,您可以尝试添加
数据点击toggle=“false”
到header div
同样在css中,您应该指定
left:0代码>
对于固定元素如果没有更多信息,很难给出答案
您是否在页面上使用JQuery?如果是这样,您可以尝试添加
数据点击toggle=“false”
到header div
同样在css中,您应该指定
left:0代码>
对于固定元素我敢肯定,这取决于ipad如何围绕输入进行调整
元素固定时会移动,因为它们固定在该位置。你会发现整个页面都在移动,试着加入一些lorem ipsum,看看是否可以复制 我敢肯定,这取决于ipad是如何以输入为中心的
元素固定时会移动,因为它们固定在该位置。你会发现整个页面都在移动,试着加入一些lorem ipsum,看看是否可以复制 我认为
位置:固定的是问题所在。这在移动网络中很奇怪。查看是否可以使用position:absolute
和z-index
实现UI
搜索:“iOS设备是否支持位置:固定”将为您提供大量关于此主题的资源,如果您确实必须使用fixed
我相信位置:固定
就是问题所在。这在移动网络中很奇怪。查看是否可以使用position:absolute
和z-index
实现UI
搜索:“iOS设备是否支持位置:固定”将为您提供有关该主题的大量资源,如果您确实必须使用fixed您是否使用过位置:relative
要使用position:absolute
必须将pos.absolute div保留在pos.relative div中
只有这样,相对定位和固定定位才能起到如下作用:
.outerheader_div{
position:relative;
}
.header_fixed{
position:absolute;
}
.outersidebar_div{
position:relative;
}
.sidebar_fixed{
position:absolute;
}
.外卸料部{
位置:相对位置;
}
.固定的标题{
位置:绝对位置;
}
.Outersidebaru分区{
位置:相对位置;
}
.侧边栏已修复{
位置:绝对位置;
}
您是否使用了位置:相对
要使用position:absolute
必须将pos.absolute div保留在pos.relative div中
只有这样,相对定位和固定定位才能起到如下作用:
.outerheader_div{
position:relative;
}
.header_fixed{
position:absolute;
}
.outersidebar_div{
position:relative;
}
.sidebar_fixed{
position:absolute;
}
.外卸料部{
位置:相对位置;
}
.固定的标题{
位置:绝对位置;
}
.Outersidebaru分区{
位置:相对位置;
}
.侧边栏已修复{
位置:绝对位置;
}
这适用于iOS6,但不幸的是不适用于iOS7:
该代码适用于固定页眉,但不适用于固定页脚。更改documentElement.className和将固定位置的元素切换为可见的组合将强制渲染引擎重新计算固定视口,并重新定位所有固定元素
需要500毫秒的定时器,因为有时触摸滚动时,滚动事件似乎不触发
<style>
#fix1, #fix2 { display: none; position: fixed; top: 0; left: 0; height: 1px; width: 1px; z-index: 2;}
.head1 #fix1, .head2 #fix2 { display: block; }
</style>
<div id=fix1></div>
<div id=fix2></div>
<script>
var toggleTimer;
var headerToggle = 0;
$(window).on('scroll', function() {
function toggle() {
var toggleit = !(headerToggle++ % 2);
$(document.documentElement).toggleClass('head1', toggleit);
$(document.documentElement).toggleClass('head2', !toggleit);
}
toggle();
clearTimeout(toggleTimer);
toggleTimer = setTimeout(toggle, 500);
});
</script>
#fix1,#fix2{显示:无;位置:固定;顶部:0;左侧:0;高度:1px;宽度:1px;z索引:2;}
.head1#fix1、.head2#fix2{display:block;}
无功切换定时器;
var headerToggle=0;
$(窗口).on('scroll',function(){
函数切换(){
变量toggleit=!(headerToggle++%2);
$(document.documentElement).toggleClass('head1',toggleit);
$(document.documentElement).toggleClass('head2',!toggleit);
}
切换();
clearTimeout(切换定时器);
toggleTimer=setTimeout(toggle,500);
});
这在iOS6上有效,但不幸的是在iOS7上不起作用:
该代码适用于固定页眉,但不适用于固定页脚。更改documentElement.className和将固定位置的元素切换为可见的组合将强制渲染引擎重新计算固定视口,并重新定位所有固定元素
需要500毫秒的定时器,因为有时触摸滚动时,滚动事件似乎不触发
<style>
#fix1, #fix2 { display: none; position: fixed; top: 0; left: 0; height: 1px; width: 1px; z-index: 2;}
.head1 #fix1, .head2 #fix2 { display: block; }
</style>
<div id=fix1></div>
<div id=fix2></div>
<script>
var toggleTimer;
var headerToggle = 0;
$(window).on('scroll', function() {
function toggle() {
var toggleit = !(headerToggle++ % 2);
$(document.documentElement).toggleClass('head1', toggleit);
$(document.documentElement).toggleClass('head2', !toggleit);
}
toggle();
clearTimeout(toggleTimer);
toggleTimer = setTimeout(toggle, 500);
});
</script>
#fix1,#fix2{显示:无;位置:固定;顶部:0;左侧:0;高度:1px;宽度:1px;z索引:2;}
.head1#fix1、.head2#fix2{display:block;}
无功切换定时器;
var headerToggle=0;
$(窗口).on('scroll',function(){
函数切换(){
变量toggleit=!(headerToggle++%2);
$(document.documentElement).toggleClass('head1',toggleit);
$(document.documentElement).toggleClass('head2',!toggleit);
}
切换();
clearTimeout(切换定时器);
toggleTimer=setTimeout(toggle,500);
});
是的,我使用的是Jquery而不是mobileQuery…是的,我还使用了left:0基本上问题是关于Position:fixed是的,我使用的是Jquery而不是mobileQuery…是的,我还使用了left:0基本上问题是关于Position:fixed,那么当我面临与fixed
如上所述,当我向下滚动时,意味着它不支持与fixed
相同的功能。一种方法是“绝对定位”标题容器,并在想要滚动的内容上垂直滚动。我从这里的另一条评论中看到,您正在使用javascript。看看iScroll()。这也许是你手机所需要的