1

私はこのような画像divを持っています

<div class="bgCover">&nbsp;</div>
<div class="overlayBox" style="position: fixed; background-image: url(../images/header.jpg)"  >

    <div class="overlayContent">

        <a href="javascript:void()" class="closeLink">Close</a>

    </div>

</div>

私はjQueryを使用してこのようなボックスを開きます

function getScrollTop() {

    if (typeof window.pageYOffset !== 'undefined' ) {
        // Most browsers
        return window.pageYOffset;
    }

    var d = document.documentElement; //IE with doctype

    if (d.clientHeight) {
        // IE in standards mode
        return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;

} //end of getScrollTop()

function doOverlayOpen() {
    ...
    showOverlayBox();
}

function showOverlayBox() {

    var scroll = getScrollTop();
    var top;

    if (scroll <= 28) {
        top = "30";
    }
    else {         
      top = (scroll + 2) ;
    }

    // set the properties of the overlay box, the left and top positions
    $('.overlayBox').css({

        display:'block',
        position:'absolute',
        left:( $(window).width() - $('.overlayBox').width() )/2,          
        top:top

    });

    // set the window background for the overlay. i.e the body becomes darker
    $('.bgCover').css({

        display:'block',
        width: $(window).width(),
        height:$(window).height()

    });
}

これにより、スクロールバーに対してボックスが開きます。しかし、問題は、overlayBoxが開いた後、スクロールバーを移動すると、このdivがその位置に留まるということです。ユーザーがスクロールバーを動かすと、このdivも上下に動くようにしたいと思います。

スクロールバーの上部でoverlayBoxdivの左上のコアナーを調整する必要があると思います。スクロールバーが移動するかどうかをチェックし、それに応じてdivを移動する関数を定義する必要があります。ここで委任が必要ですか、それとも...どうすればよいですか？

これが画像です。画像2で見ることができます。スクロールバーを移動すると、画像divが移動しません。

ここに画像の説明を入力してください ここに画像の説明を入力してください

ありがとう

4

2 に答える 2

2

非常に簡単ですposition: fixed。代わりに使用してください。だからそれをに変更します

function showOverlayBox() {

    var top;


    top = "30px";

    // set the properties of the overlay box, the left and top positions
    $('.overlayBox').css({

        display:'block',
        position:'fixed',
        left:( $(window).width() - $('.overlayBox').width() )/2,          
        top:top

    });

    // set the window background for the overlay. i.e the body becomes darker
    $('.bgCover').css({

        display:'block',
        width: $(window).width(),
        height:$(window).height()

    });
}

もう必要のない他の関数（getScrollTopとdoOverlayhappen）

于 2012-04-05T10:43:00.580 に答える
0

を使ってみてくださいPosition:fixed。そうすれば、スクロールバーでdivの背景のコンテンツを移動できます。

これがあなたのためのデモです。

于 2012-04-05T10:50:33.147 に答える