0

スクロールするとテキストが画面に追従するようにしようとしていますが、

すべてのテキストを「mydiv」という名前の div に配置しました

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

Jクエリ

<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;
}
4

3 に答える 3

4

を使用position: absoluteすると、ボディに対して固定されます。position: fixedウィンドウに対して相対的に修正する必要があります。

ボックスのサイズよりも大きいコンテンツがある場合は、overflowプロパティでそれを考慮して、ボックスにスクロール バーが表示されるようにする必要があります。ユーザーはすべてのコンテンツを表示できますが、もちろんすべてを同時に表示することはできません。したがって、CSS は次のようになります。

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

jQuery を完全に削除できます。あなたが持っている限り、あなたはそれを必要としませんposition: fixed。

ただし、これはビューポートの概念を使用するモバイル ブラウザでは機能しないことに注意してください。レンダリングされた「ウィンドウ」の上にビューが重ねられ、要素はビューポートではなくウィンドウにロックされます。その場合、Javascript ソリューションを考え出す必要がありますが、できればモバイル デバイスを使用している場合にのみ起動するものを使用してください。fixed

于 2013-05-14T22:04:44.000 に答える