Моделируйте position:fixed в jQuery
У меня есть заголовок, который больше, чем ширина страницы так, чтобы я не мог использовать position:fixed установить его сверху страницы, потому что я абсолютно должен смочь прокрутить горизонтально. Я не думаю, что существует решение CSS для этого.
Я сделал образец кода, чтобы попытаться воспроизвести эффект position:fixed, но существуют нежелательные переходы. Мой код как следует:
$(window).scroll(function() {
var y = $(window).scrollTop();
$("#headertable").css('top', y+175);
});
Есть ли способ сделать, он действительно присоединил, как position:fixed? (Любопытно, это лучше отображено прямо сейчас в IE, чем в FF, потому что это не имеет этот эффект "перехода"),
Найдите пример здесь: http://jsbin.com/eyuya/7. Первая таблица с position:fixed, другой использует мой код. Это - переходящий эффект, которого я стараюсь избегать, если существует решение.
Править:
Все еще не нашли удовлетворяющее решение, я думаю, что буду использовать это в конце, потому что сайт предназначен, чтобы использоваться на IE, и не кажется, что решение для чуда существует, чтобы присоединить отделение к области просмотра и смочь прокрутить горизонтально. Я запускаю, щедрость в случае кого-то столкнулась с этой проблемой прежде и нашла хорошее решение.
Спасибо за людей, которые уже попытались ответить на это не столь простое, как это смотрит проблема ;)
4 ответа
Вы можете обернуть элемент статическим позиционируемым DIV, чтобы получить полосы прокрутки, а затем прослушать прокрутку окна и расположить фиксированный заголовок в соответствии со значением scrollLeft:
var elem = $('#headertable');
var win = $(window);
var wrap = $('<div>').css({
width: elem.width(),
height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
elem.css('left', win.scrollLeft()*-1);
});
Похоже, работает в IE/FF/Chrome:
Вы можете создать фиктивный элемент visibililty:hidden с той же шириной, что и у элемента position:fixed. Вот пример:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
$(document).ready(function(){
var dummy = $('<div>dummy</div>').width( $('#header').width() + 'px').css('visibility','hidden');
$('body').append(dummy);
});
});
</script>
</head>
<body>
<div id="header" style="width:2000px;background:red;position:fixed;top:0;height:20px;">
This is aheder with fixed position
</div>
<div style="height:1200px;background:green;">
</div>
</body>
</html>
http://fixedheadertable.com/demo/multipletablesdemo.html
попробуйте вместо этого:)
вы можете создать div-обертку и затем указать ширину div
например, width: 150%; или width; 2000px;
в зависимости от ваших требований
зачем вам нужна прокрутка?