jquery - 如何在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 背景的内容。

这是给你的演示。