如何使用jQuery中的滚动条移动div

Question

我有像这样的图像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也会上下移动。

我想我需要用滚动条顶部调整overlayBox div的顶部左核心。需要定义一个函数来检查滚动条是否移动然后相应地移动div。我在这里需要代表团吗？我怎么能这样做？

以下是您可以看到的图像2中的图像，如果我移动滚动条，则我的图像div不会移动

由于

Answer 1

非常简单：改用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）

Answer 2

尝试使用Position:fixed，然后您可以使用滚动条移动div背景的内容。

以下是demo。