Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 标题更改位置:[固定]在Ipad键盘弹出后_Javascript_Html_Css_Ipad - Fatal编程技术网

Javascript 标题更改位置:[固定]在Ipad键盘弹出后

Javascript 标题更改位置:[固定]在Ipad键盘弹出后,javascript,html,css,ipad,Javascript,Html,Css,Ipad,我正在Ipad上测试我的应用程序,我面临的问题是,我在表单上向下滚动,我的顶部标题栏是固定的,所以当我点击文本框时,它也会向下导航,然后顶部标题栏隐藏,我的侧边栏(与标题相同)也会向上滚动。有什么解决方案吗问题。我发现了很多文章,但大多数都是黑客的一种,这是不好的未来前景,所以任何好的解决方案,这将是巨大的帮助 .headbar{ top:0; position:fixed; width:100% } .siderbar { top:50px; position:fixed;

我正在Ipad上测试我的应用程序,我面临的问题是,我在表单上向下滚动,我的顶部标题栏是
固定的
,所以当我点击
文本框
时,它也会向下导航,然后顶部标题栏隐藏,我的侧边栏(与标题相同)也会向上滚动。有什么解决方案吗问题。我发现了很多文章,但大多数都是黑客的一种,这是不好的未来前景,所以任何好的解决方案,这将是巨大的帮助

.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()。这也许是你手机所需要的