0

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

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

问题是，它以某种方式在 FF、IE（某种）中工作，并且绝对不能在 Chrome 中工作。

我无法弄清楚问题是什么。

我有模拟问题的小提琴：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'); 
        }
    });
}
});

非常感谢您的帮助

问候彼得

4

2 回答 2

0

那么你需要指定right并且top为了position: fixed正常工作，检查这个小提琴的新版本：

http://jsfiddle.net/rRh8F/6/

我补充说：

top: 0;
right: 10px;

到你的.smallClockPreviewFixed班级；你也可以删除float: right;；float当涉及到元素时，它们对你没有任何好处，fixed因为它们无论如何都是不合时宜的；

于 2013-09-27T20:43:39.160 回答
0

而不是使用.removeAttr('style')，只是使用.css({'position':'fixed','right':'0');。Fixed并默认absolute忽略float，所以只需将它们的间距分配给right. 我已经更新了你的小提琴以证明它有效。这也将使您有机会简化您的 javascript 和 css。

于 2013-09-27T20:36:03.427 回答