0

ライト ボックスに 1 つの画像を表示する必要があります。

私は以前に postion:fixed を与えていました。ただし、画像の高さが画面の高さよりも大きい場合、問題が発生します。

問題は次のとおりです。

ここで、絶対概念を使用する必要があります。しかし、ここでの問題は、CSS で静的な「トップ」値を指定すると、ユーザーがページの下部にあるリンクをクリックすると、ライトボックスの画像がページの上部に表示されることです。

すること:

ページのスクロールされた高さをトップとして設定する必要があります: ライトボックスの値 imageimage 。scrollTop() を試してみました。しかし、得られませんでした。

どうやってするか？

教えてください。

編集： これが私のコンセプトです：http://jsfiddle.net/velmurugansp/F7z4f/1/

<div stle="position:relative">
<div style="height:1000px">
Top Contents
</div>
<img src="http://ftape.com/model/wp-content/uploads/2011/02/Caroline-Corinth-Models1-The-Model-Wall_4.jpg" width="630" height="630" style="position:absolute; top:0; left:-50%; margin-left:315px;display:block" id="img" />
</div>

<script>
scrollHeight=document.scrollTop();
$("#img").css("top",scrollHeight);
</script>

top:1000px; を指定する必要があります。「#img」に。前の要素の高さの高さは 1000px です。

4

3 に答える 3

2

画像の上部の位置を設定するには、次のように使用できます。

jQuery(document).ready(function() {
    $(window).scroll(function() {
        var scrollHeight = $(window).scrollTop();
        var img = $('#img');
        if (scrollHeight < $(document).height()-img.height()-20) {
            img.css("top", scrollHeight);
        }
    });
});

jsfiddle

于 2013-05-31T12:00:17.223 に答える
0

他の要素ではなく、body または html 要素の scrollTop() を取得する必要があります。

于 2013-05-31T09:33:00.367 に答える