Question

我有一个非常令人沮丧的错误，只能出现在我的Android和iOS浏览器（标准版和Firefox版）上。

我的简单HTML确保div在用户滚动时保持在页面顶部。这是通过检测滚动事件并设置div的margin-top来实现的。这是一个Parallax滚动网站。 是的我知道我可以使用fixed但是修改会更改div的尺寸并使内容垂直位于div'弹出窗口下方。我将详细解释为什么fixed不是下面的选项。

如果您运行此JSFiddle，则它适用于桌面浏览器，但不适用于移动设备

HTML在桌面浏览器中运行良好，但在Android和iOS浏览器上，div不会保持固定。你知道出了什么问题以及如何让它在移动浏览器上工作吗？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
    <title>Preview</title>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <style>
        #container {
            position: relative;
            width: 900px;
            height: 1500px;
            background-color: #ddd;
        }

        .fixed-slide {
            position: absolute;
            width: 100%;
            height: 500px;
            background-color: blue;
        }
    </style>
</head> 
<body> 

    <!-- Header Static content here -->

    <div id="container">
        <div class="fixed-slide">
            <p>Foo Bar</p>
        </div>
    </div>

    <!-- Lots of Static main page content here. If I were to make .fixed-slide fixed this content would now popup 
                and appear underneath the header content - naughty - not to mention that .fixed-slides dimensions
                will change. Thus the need for margin-top instead -->

    <script>

        $(document).ready(function () {

            var CONTAINER_TOP = $("#container").offset().top;
            var FIXED_SLIDE = $('.fixed-slide').first();

            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                var marginTop = scrollTop - CONTAINER_TOP;

                if (marginTop < 0 || marginTop > ($("#container").height() - FIXED_SLIDE.height()))
                return;

                FIXED_SLIDE.css('margin-top', marginTop);
            });
        });

    </script>

</body> 
</html>

div位于静态内容之间（在其上方和下方）。如果它被设置为固定，那么下面的内容将弹出，div位于其上面。 div的尺寸指定为百分比，因此在修复时不再占用其父容器宽度的100％而占窗口宽度的100％。因此，除非我做更多的工作，否则修复不会起作用。

Margin-Top不适用于移动浏览器

0 个答案: