javascript - 使 div 跟随屏幕不起作用

Question

我试图让文本在你滚动时跟随屏幕，

我已将所有文本放在名为“mydiv”的 div 中

<div id="mydiv" > 
    <!-- lots of stuff in asp -->
    <table>
        <!-- table rows, etc. -->
    </table>
</div>

Jquery

<script type="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        var currentTop = parseInt($('#mydiv').css('top'));
        $(window).scroll(function () {
            var top = $(window).scrollTop();
            $('#mydiv').css('top', top+currentTop);
        });

    });

</script>

这是我的CSS

.mydiv{
    position:absolute;
    top:10px;
}

Answer 1

使用 position: absolute 相对于主体固定它。您需要 position: fixed，它相对于窗口固定它。

如果您的内容大于框的大小，则需要使用 overflow 属性来解决这个问题，这样框上就会有滚动条。然后用户可以看到所有内容，当然不是同时看到所有内容。所以你的 CSS 将是:

.mydiv {
    position: fixed;
    top: 10px
    overflow: auto;
    height: 100%;
}

您可以完全放弃 jQuery；你不需要它，只要你有 position: fixed。

但是请注意，这对使用 viewport 的移动浏览器不有效概念:在呈现的“窗口”上有一个 View ，fixed 元素锁定到窗口，而不是视口(viewport)。在这种情况下，您需要想出一个 Javascript 解决方案，但最好是只有在您使用移动设备时才会触发的解决方案。