javascript - html、css、粘盒、Chrome 的问题

Question

我正在尝试在此页面上实现一个粘性框 http://www.uclock.it/CreateClock/

如果您添加更多行并滚动，小时钟预览应始终在屏幕上以及第一行和最后一行之间保持可见。

问题是，它在 FF、IE(某种程度上)中以某种方式工作，但在 Chrome 中绝对不起作用。

我不知道是什么问题。

我有模拟问题的 fiddle :http://jsfiddle.net/rRh8F/3/

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'); 
        }
    });
}
});

非常感谢您的帮助

问候彼得

Answer 1

不要使用 .removeAttr('style')，只需使用 .css({'position':'fixed','right':'0');。 Fixed 和 absolute 默认忽略 float，因此只需将它们的间距分配为 right。我有你pdated your fiddle以证明它有效。这也将使您有机会简化您的 javascript 和 css。