Question

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>

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()

    });
}

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.

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?

Here are the images, in image 2 you can see, if i move the scrollbar then my image div don’t move

Thanks

Answer 1

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()

    });
}

the other functions (getScrollTop and doOverlayhappen) you don’t need anymore