在Safari和Chrome中跳轉div。 jQuery/Javascript

Question

我有一個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 DIV我有一個#scrollWrapper DIV沒有定位和#scrollWrapper裏面我有一個#scrollBox。 #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直到您滾動。一旦滾動過#scrollBox div的頂部，javascript會添加一個類以使#scrollBox位置：fixed而不是絕對。

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

在Firefox和IE中，這工作正常。

在Safari和Chrome中，一旦#scrollBox javascript命中，＃scrollBox div會跳出#HangerLeft div到頁面中間，並忽略#HangerLeft div的位置。

我一直在爲此奮戰2周，並且處於茫然之中。

任何幫助，將不勝感激。

Answer 1

好的，所以我重新編寫了你的​​代碼。我保持它的喜好..我會以不同的方式設置它，但這對你的方法有效。你可以看到一個live version here 的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> 

CSS：

#HangerLeft { 
    top: 100px; 
} 

#scrollWrapper { 
    width: 130px; 
} 

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

HTML：

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