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概念的移动浏览器：在呈现的“窗口”和{{1}上分层显示视图元素被锁定到窗口，而不是视口。在这种情况下，您需要提出一个Javascript解决方案，但最好只有在您使用移动设备时才会触发。

Answer 2

如果您希望元素相对于视口定位，请尝试使用css position: fixed。

请尽可能地清理您的问题格式，以防其他人希望帮助您并从您的问题中学习。

Answer 3

使用位置：固定在您要“关注屏幕”的div上。

使div跟随屏幕不工作

3 个答案: