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