Javascript 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（文档）.ready（函数（$）{
if（$（'#smallClockPreview'）.length）{
var maleHodinyTop=$（'#smallClockPreview'）.offset（）.top；
var maleHodinyVyska=$（“#smallClockPreview”）.height（）；
$（窗口）。滚动（功能（evt）{
var zarazka=$（'.clearHelp'）.offset（）.top；
var zarazkaMinusVyska=zarazka-$（“#smallClockPreview”）.outerHeight（）；
var topOknaOdZacatku=$（this.scrollTop（）；
if（topOknaOdZacatku>maleHodinyTop）{
if（拓扑克纳奥扎卡图扎拉兹卡）{
}
否则{
if（（萨拉兹卡-马莱霍迪尼维斯卡）>马莱霍迪尼维斯卡）{
$（#smallClockPreview'）.css（{“position”：“relative”，“top”：（zarazka-malehodinivyska）}）；
}
}
}
}否则{
$（“#smallClockPreview”）.removeAttr（'style'）；
$（'#smallClockPreview'）.removeClass（'smallClockPreviewFixed'）；
}
});
}
});

非常感谢你的帮助

问候

---

Petr

不要使用

.removeAttr（'style'）

，只需使用

.css（{'position'：'fixed'，'right'：'0'））默认情况下，

Fixed

和

absolute

忽略

float

，因此只需使用

right

来分配它们的间距。我已经向您演示了它的工作原理。这也将给您简化javascript和css的机会。

您需要为

po指定
right
和
top
位置：已修复

要正常工作，请检查此小提琴的新版本：

我补充说：

top: 0;
right: 10px;

对于您的

.smallClockPreviewFixed

类；，您也可以删除

float:right；

；

float

对于

固定的

元素没有任何好处，因为它们无论如何都不在流中

top: 0;
right: 10px;