如何使用jQuery中的滚动条移动div
我有一个这样的图像div
I have an image div like this
<div class="bgCover"> </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打开这样的盒子
I am using jQuery to open the box like this
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也会上下移动.
This open the box with respect to the scroll bar. But the problem is once the overlayBox is open, and then i move the scroll bar, then this div remain at it's position. I want that if user move the scroll bar then this div also move up and down.
我认为我需要用滚动条顶部调整overlayBox div的顶部,左核心..需要定义一个函数,该功能检查滚动条是否移动,然后相应地移动div.我需要在这里授权还是...我该怎么办?
I think i need to adjust the top, left corener of the overlayBox div with the scrollbar top.. Need to define a function that checks if scrollbar moves then move the div accordingly. Do i need delegation here or... How can i do it?
以下是图像,在图像2中,您可以看到,如果我移动滚动条,则图像div不会移动
Here are the images, in image 2 you can see, if i move the scrollbar then my image div don't move
谢谢
非常简单:请改用position: fixed
.因此将其更改为
Very simple: use position: fixed
instead. So change it to
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)
the other functions (getScrollTop and doOverlayhappen) you don't need anymore