HTML, CSS, Sticky Box, проблемы с Chrome

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

Большое спасибо за любую помощь

С уважением, Петр

Теги:

2 ответа

0

Вместо использования .removeAttr('style') просто используйте .css({'position':'fixed','right':'0'); , Fixed и absolute игнорирование float по умолчанию, поэтому просто назначьте их интервалы right. Я придумал вашу скрипку, чтобы продемонстрировать, что она работает. Это также даст вам возможность упростить javascript и css.

0

Ну, вам нужно указать right и top для position: fixed чтобы работать правильно, проверьте новую версию этой скрипты:

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

Я добавил:

top: 0;
right: 10px;

вашему классу .smallClockPreviewFixed; также вы можете удалить float: right; ; float не принесет вам пользы, когда дело доходит до fixed элементов, так как они все равно выходят из потока;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню