移动/android:层过渡只在滚动到页面顶部时起作用

我尝试有一个固定位置的按钮，触发菜单从底部动画显示。如果可能的话，我只想使用CSS，而不是JQuery。

在我的旧Android手机(2.2)上，当页面滚动到顶部时，它可以工作。但是当我往下滚动一点，它就不工作了，什么都没发生。

固定的div保持固定(可以看到我添加了一个边框)，但是动画没有执行。在pc浏览器中它可以工作。

我是不是疏忽了什么?任何帮助都非常感激!

<head>
<script type="text/javascript">
    function show_menu() {
        document.getElementById("menu_sun").style.height = "50%";
    }
    function hide_menu() {
        document.getElementById("menu_sun").style.height = "0";
    }
</script>
<style>
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #wrapper {
        position: relative;
        min-height:100%; height: auto !important; height:100%;
    }
    #menu_wrapper {
        position: fixed; top: 0;
        height: 500px; width: 100%;
        -webkit-backface-visibility:hidden;
        border: 2px solid red;
    }
    #menu_sun {
        width: 200px; height: 0;
        position: absolute;
        bottom: 0;
        background-color: #FF4E0E;
        overflow: hidden;
        -webkit-transition: height 2s linear;
        -moz-transition: height 2s linear;
        -o-transition: height 2s linear;
        transition: height 2s linear;
    }
</style>
</head>
<div id="wrapper">
<h1>lots of text</h1>   <h1>lots of text</h1>   <h1>lots of text</h1>
<h1>lots of text</h1>   <h1>lots of text</h1>   <h1>lots of text</h1>
<h1>lots of text</h1>   <h1>lots of text</h1>   <h1>lots of text</h1>
<h1>lots of text</h1>   <h1>lots of text</h1>   <h1>lots of text</h1>
<h1>lots of text</h1>   <h1>lots of text</h1>   <h1>lots of text</h1>
<div id = "menu_wrapper">
    <form>
        <input type="button" id="button1" onclick="show_menu()" value="show">
    </form>
    <div id = "menu_sun">
        <form>
            <input type="button" id="button1" onclick="hide_menu()" value="hide">
        </form>
    </div>
</div>
</div>

我找不到一个直接的解决办法，但一个间接的…出现这个问题是因为动画应该在固定的div中运行。我现在"模拟"一个固定的div使用绝对位置，但然后移动div根据滚动(与原来的问题相同的主体):

<style>
    #menu_wrapper {
    position: absolute; top: 0;
    height: 100%; width: 100%;
    -webkit-backface-visibility:hidden;
    }
</style>
<script type="text/javascript">
    window.onscroll = function() {
        var layertop=window.scrollY;
        document.getElementById("menu_wrapper").style.top = layertop+"px";
    };
</script>

在桌面上，固定的div没有明显的区别，在我的旧Android 2.2 (HTC Desire)上，图层在每次滚动后都会跳回它的位置。但就我的目的而言，这是可以的，动画在每个位置运行……对了，我根据body load和window size来调整div的高度

相关内容

最新更新

热门标签：