Я пытаюсь реализовать липкую коробку на этой странице 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');
}
});
}
});
Большое спасибо за любую помощь
С уважением, Петр
Вместо использования .removeAttr('style')
просто используйте .css({'position':'fixed','right':'0');
, Fixed
и absolute
игнорирование float
по умолчанию, поэтому просто назначьте их интервалы right
. Я придумал вашу скрипку, чтобы продемонстрировать, что она работает. Это также даст вам возможность упростить javascript и css.
Ну, вам нужно указать right
и top
для position: fixed
чтобы работать правильно, проверьте новую версию этой скрипты:
Я добавил:
top: 0;
right: 10px;
вашему классу .smallClockPreviewFixed
; также вы можете удалить float: right;
; float
не принесет вам пользы, когда дело доходит до fixed
элементов, так как они все равно выходят из потока;