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

我有一个像这样的图像div

 
 
 
 Close 
  

我正在使用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. ie 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. ie the body becomes darker $('.bgCover').css({ display:'block', width: $(window).width(), height:$(window).height() }); } 

您不再需要的其他函数（getScrollTop和doOverlayhappen）

Answer 2

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

这是一个演示版 。