HTML，CSS，粘盒，使用Chrome

我想實現這個頁面http://www.uclock.it/CreateClock/HTML，CSS，粘盒，使用Chrome

上粘盒如果你添加一些行和滾動小時鐘預覽煩惱應該始終保持在屏幕上可見之間第一行和最後一行。

問題是，它以某種方式在FF，IE（某種）中工作，並且絕對不能在Chrome中工作。我想不出什麼問題。

的CSS是：

.smallClockPreview 
{ 
    display: inline-block; 
    float: right; 
    height: 237px; 
    margin-right: -50px; 
    margin-top: -74px; 
    width: 237px; 
    position:relative; 
} 
.smallClockPreviewFixed 
{ 
    display: inline-block; 
    float: right; 
    height: 237px; 
    margin-right: -50px; 
    margin-top: -217px; 
    width: 237px; 
    position:fixed; 
}

和JS是（遺憾的變量是捷克）：

jQuery(document).ready(function($) { 
if ($('#smallClockPreview').length) { 
    var maleHodinyTop = $('#smallClockPreview').offset().top; 
    var maleHodinyVyska = $('#smallClockPreview').height(); 
    $(window).scroll(function (evt) { 
     var zarazka = $('.clearHelp').offset().top; 
     var zarazkaMinusVyska = zarazka - $('#smallClockPreview').outerHeight(); 
     var topOknaOdZacatku = $(this).scrollTop(); 
     if (topOknaOdZacatku > maleHodinyTop) { 
      if (topOknaOdZacatku < zarazkaMinusVyska) { 
       $('#smallClockPreview').removeAttr('style');      $('#smallClockPreview').addClass('smallClockPreviewFixed').removeAttr('style'); 
      } else { 
       if (topOknaOdZacatku > zarazka) { 
       } 
       else { 
        if ((zarazka - maleHodinyVyska) > maleHodinyVyska) { 
         $('#smallClockPreview').css({ "position": "relative", "top": (zarazka - maleHodinyVyska) }); 
        } 
       } 
      } 
     } else { 
      $('#smallClockPreview').removeAttr('style'); 
      $('#smallClockPreview').removeClass('smallClockPreviewFixed'); 
     } 
    }); 
} 
});

謝謝非常多的任何幫助

Regards Petr

來源

2013-09-27 Petr Žampach

而不是使用.removeAttr('style')，只需使用.css({'position':'fixed','right':'0');。 Fixed和absolute默認情況下忽略float，因此只需將它們的間距分配爲right即可。我已經通過pdated your fiddle來證明它有效。這也將使您有機會簡化您的JavaScript和CSS。

來源

2013-09-27 20:36:03 elkirkmo