一次向下滚动并再次向上滚动后灯箱上边距发生变化答案

【问题标题】：lightbox top margin chaging after once scrolling down and again up一次向下滚动并再次向上滚动后灯箱上边距发生变化
【发布时间】：2012-08-23 14:09:05
【问题描述】：

我正在使用灯箱来显示带有照片的 cmets。问题是，当我向下滚动查看灯箱并滚动回顶部时，即使在指定顶部后，顶部边距也会发生变化。

我指定顶部和左侧的 jQuery 代码是：

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

这是灯箱 div 的 HTML：

<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">

滚动前的显示方式

![滚动前的显示方式][1]

向下滚动然后再次向上滚动后的显示方式

![向下滚动然后再次向上滚动后的显示方式][2]

【问题讨论】：

您的 JS 缺少 left 的 var 声明和函数定义的终止 ; - 尽管我怀疑这会解决问题
感谢您指出这一点，尽管它没有工作的朋友有更多建议，但没有注意到它
你能显示#tp-lightboxactitem元素的HTML吗？
( 1 / 5 )

标签： javascript jquery css lightbox css-position

【解决方案1】：

通过小改动解决了这个问题

这里是代码，希望对有需要的人有所帮助

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

【讨论】：

【解决方案2】：

尝试使用类似的东西。希望能解决。

$("#YourDivID").animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );

【讨论】：