在Safari和Chrome中跳跃跳水。jQuery/Javascript

我有一个div#HangerLeft，css.right是通过jQuery自动生成的，它位于页面的左侧，基于页面的正文宽度。它是绝对定位的

function hangerLeft() {
  var hangerPosition = (jQuery("body").innerWidth() / 2) + (990 / 2);
  jQuery("#HangerLeft").css("position","absolute").css("right", hangerPosition +"px").css("top","20px");
}

在#HangerLeft分区内，我有一个没有定位的#scrollWrapper分区，在#scrollWrapper分区内，我有一个#scrollBox。#滚动框处于绝对位置

#scrollWrapper { width:130px; height:400px; border:1px solid #fff;}

#scrollBox { position: absolute; top: 100; margin-top: 25px; padding-top: 0px;}

#scrollBox.fixed { position: fixed; top: 0;}

滚动框一直放置到您滚动为止。一旦滚动到#scrollBox div的顶部，javascript就会添加一个类，使#scrollBox位置：固定而不是绝对

<script>
$(function () {

var msie6 = $.browser == 'msie' && $.browser.version < 7;

if (!msie6) {
var top = $('#scrollBox').offset().top - parseFloat($('#scrollBox').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();

  // whether that's below the form
  if (y >= top) {
    // if so, ad the fixed class
    $('#scrollBox').addClass('fixed');
  } else {
    // otherwise remove it
    $('#scrollBox').removeClass('fixed');
  }
 });
}  
});
</script>

$（函数（）{
变量msie6=$.browser='msie'&&$.browser.version<7；
如果（！msie6）{
var top=$（'#scrollBox'）.offset（）.top-parseFloat（$（'#scrollBox'）.css（'margin-top'）.replace（/auto/，0））；
$（窗口）。滚动（功能（事件）{
//卷轴的y位置是什么
var y=$（this.scrollTop（）；
//是否在表格下方
如果（y>=顶部）{
//如果是的话，请选择固定类别
$（“#滚动框”）.addClass（'fixed'）；
}否则{
//否则，请将其移除
$（“#滚动框”）.removeClass（'fixed'）；
}
});
}  
});

在Firefox和IE中，这很好用

在Safari和Chrome中，一旦#scrollBox javascript点击，#scrollBox div就会跳出#HangerLeft div跳入页面中间，并忽略#HangerLeft div的位置

我已经为此奋斗了两个星期，现在不知所措

---

任何帮助都将不胜感激

好的，我修改了你的代码。我一直按你的喜好做。。我会以另一种方式设置，但这对您的方法有效。你可以看到一个 JavaScript:

<script type="text/javascript">

function setupScrollBox(){
  // cache box element and use wrapper as your position element
  var hanger = $("#HangerLeft"),
      position = $("#wrap").offset();

  hanger.css({
    position: 'absolute',
    left: position.left - $("#scrollWrapper").outerWidth(),
    marginTop: '25px'
  });

}

$(document).ready(function(){
  // check if IE6
  var msie6 = $.browser.msie && $.browser.version < 7;

  setupScrollBox();

  // attach resize event to window 
  $(window).resize(function(){
    setupScrollBox();
  });

  // check browser
  if(!msie6){
    // attach scroll event     
    $(window).scroll(function (event) {
      // get scroll position and cache element so we only access it once
      var y = $(this).scrollTop(),
          wrap = $('#HangerLeft');

      // if scroll position is greater than 100 adjust height else do nothing
      if(y > 100)
        // you can animate the position or not, your call
        wrap.stop().animate({top: y}, 250);
        //wrap.css('top', y+'px');
    });
  }  
});
</script>

HTML:

滚动框

您是否有一个示例页面，或者您是否可以制作JSFIDLE.net示例？这很有意义。无单位像素值在技术上不是有效的CSS，WebKit确实缺乏Firefox来之不易的“支持蹩脚的、坏掉的IE CSS”黑客。我在#scrollBox和#scrollBox中的两个顶级值中都添加了px。修复了，出于某种原因，我仍然在跳。你有你的例子吗？我的例子如下：

#HangerLeft {
    top: 100px;
}

#scrollWrapper {
  width: 130px;
}

#scrollBox {
  position: relative;
  margin-top: 25px;
  padding-top: 0px;
  z-index: 10;
}

<div id="HangerLeft">
  <div id="scrollWrapper">
    <div id="scrollBox">
      <div id="mainContainer">
        <div id="shareContainer">
          <div class="moduleShareHeader">SCROLL BOX</div>
        </div>
      </div>
    </div>
  </div>
</div>