如何使用jQuery中的滚动条移动div [英] how to move div with the scrollbar in jQuery

问题描述

我有一个这样的图像div

I have an image div like this

<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打开这样的盒子

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

这篇关于如何使用jQuery中的滚动条移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！