Android 移动/安卓：仅当滚动到页面顶部时，层转换才起作用_Android_Css_Scroll_Css Transitions

Android 移动/安卓：仅当滚动到页面顶部时，层转换才起作用

android css scroll

Android 移动/安卓：仅当滚动到页面顶部时，层转换才起作用,android,css,scroll,css-transitions,Android,Css,Scroll,Css Transitions,我试图有一个固定位置的按钮，触发菜单，从底部显示动画。如果可能的话，我只想使用CSS，不想使用JQuery 在我的旧安卓手机（2.2）上，当页面滚动到顶部时，它就会工作。但当我向下滚动一点，它就不再工作了，什么也没发生 fixed div保持固定（以查看我添加了边框），但不会执行动画。在PC浏览器中它可以工作我看到什么明显的东西了吗？非常感谢您的帮助 <head> <script type="text/javascript"> function show_men

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

在我的旧安卓手机（2.2）上，当页面滚动到顶部时，它就会工作。但当我向下滚动一点，它就不再工作了，什么也没发生

fixed 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>


功能显示菜单（）{
document.getElementById（“menu_sun”）.style.height=“50%”；
}
函数隐藏菜单（）{
document.getElementById（“menu_sun”）.style.height=“0”；
}
html，正文{高度：100%；宽度：100%；边距：0；填充：0；}
#包装纸{
位置：相对位置；
最小高度：100%；高度：自动！重要；高度：100%；
}
#菜单包装{
位置：固定；顶部：0；
高度：500px；宽度：100%；
-webkit背面可见性：隐藏；
边框：2倍纯红；
}
#菜单{
宽度：200px；高度：0；
位置：绝对位置；
底部：0；
背景色：#FF4E0E；
溢出：隐藏；
-webkit过渡：高度2s线性；
-moz过渡：高度2s线性；
-o型过渡：高度2s线性；
过渡：高度2s线性；
}
大量文本大量文本大量文本大量文本
大量文本大量文本大量文本大量文本
大量文本大量文本大量文本大量文本
大量文本大量文本大量文本大量文本
大量文本大量文本大量文本大量文本

我找不到直接的解决方案，但找到了间接的解决方案。。。出现此问题的原因是固定的div，动画应该在该div中运行。我现在使用position absolute“模拟”一个固定的div，然后根据滚动移动div（与原始问题中的主体相同）：


#菜单包装{
位置：绝对；顶部：0；
高度：100%；宽度：100%；
-webkit背面可见性：隐藏；
}
window.onscroll=函数（）{
var layertop=window.scrollY；
document.getElementById（“菜单包装”）.style.top=layertop+“px”；
};

在桌面上，固定div没有明显的区别，在我的旧安卓2.2（HTC Desire）上，每滚动一次，图层就会跳回原来的位置。但就我而言，这没关系，动画在每个位置运行。。。哦，我根据身体负荷和窗口大小调整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>