使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就不需要它position: fixed 。

但是請注意，這並不為移動瀏覽器，它使用一個工作視的概念：有層疊在渲染的“窗口”和一個視圖fixed元素被鎖定的窗口，而不是視口。 在那種情況下，您將需要提出一種Javascript解決方案，盡管最好只有在移動設備上才能觸發的Javascript解決方案。

Answer 2

嘗試CSS position: fixed如果要相對於視口定位元素，則position: fixed 。

並且，如果其他人希望幫助您並從您的問題中學習，請盡最大可能清理您的問題格式。

Answer 3

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