Question

I’m using a lightbox to display comments with photo. The problem is that when I scroll down to see the lightbox, and scroll back to the top, the top margin changes even after specifying the top.

My jQuery code to specify top and left is :

jQuery.fn.center = function() {
  this.css("position","fixed");
  var top = "20px";
  left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft()+"px";
  this.animate({top: top, left: left});
  return this;
}

$('#tp-lightboxactitem').center();  

Here is the HTML for the lightbox div:

<div class="dark-lightbox lightboxitem tp-lightboxactitem-loaded" id="tp-lightboxactitem" style="display: block; top: 20px; left: 314.5px; position: fixed; margin-top: 30px;">
  <div>
    <center>
      <img src="uploads/_DSC9322_watcopy_bor_5_$1$uh2.fw5.$uFln.yw5QjSgVKjmhD8.jpg?id=3&amp‌​;pic=113" class="tp-mainimage" id="plzxc">
    </center>
  </div>
  <div class="dark-lightbox infofield">
    <div class="dark-lightbox title"></div>
    <div class="dark-lightbox pageofformat">( 1 / 5 )</div>
    <div class="dark-lightbox description" id="dark-lightbox description">

How it appears before scrolling

![How it appears before scrolling][1]

How it appears after scrolling down and then up again

![How it appears after scrolling down and then up again][2]

Answer 1

Got this fixed by doing small changes

here is the code hope it helps some one in need

cssAnimate({'left':($(window).width()/2 - thisw/2)+'px', 'top':'20px' },{duration:300,queue:false});