2014年 position: fixedの旅を読んで、android 4.1.x系でposition:fixedがうまくいかなくなるケースがあるようで、ちょっと調査したら、下記のケースでうまくいかないようだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script>
function openMenu(){
document.getElementsByClassName('menu')[0].style.display = 'block';
}
</script>
<style>
html,body{
margin: 0;
padding: 0;
}
.header{
position: fixed;
background-color:red;
width: 100%;
height: 15px;
}
.menu{
display:none;
position: fixed;
top: 0;
left: 0;
z-index:1;
height: 100%;
width: 20px;
background-color:blue;
}
.body{
height: 10000px;
}
</style>
<body>
<div class="header" onclick="openMenu();"></div>
<div class="menu"></div>
<div class="body"></div>
</body>
</html>この場合、ヘッダーをタップするとメニューが表示される処理になっているのだが、なぜか、android 4.1.Xでヘッダーがおかしくなる。解決方法は2個あって、1個目は、下のようにCSSに「top:0px;」を入れる方法。
.header{
position: fixed;
background-color:red;
width: 100%;
height: 15px;
top:0px;
}2個目は、JavaScriptで対応する方法。function openMenu(){
document.getElementsByClassName('menu')[0].style.display = 'block';
document.getElementsByClassName('header')[0].style.top = '0';
}他にスマートな対応方法があれば、ご教授願いたく。
0 コメント:
コメントを投稿