Question

我尝试使用固定位置按钮触发菜单从底部显示动画。如果有可能我想只使用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>

Answer 1

我找不到直接的解决方案，而是间接解决方案...... 出现问题是因为固定的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）上，每次滚动后图层跳回到它的位置。但是为了我的目的，没关系，动画在每个位置运行......哦，我调整div的身高和窗口大小的高度......

mobile / android：图层转换仅在滚动到页面顶部时才有效

1 个答案: