Имитировать позицию: исправлено в 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, другая - мой код. Это эффект прыжка, который я пытаюсь избежать, если есть решение.

Edit

По-прежнему не найдено удовлетворительного решения, я думаю, что я буду использовать это в конце, потому что сайт предназначен для использования в IE, и это не похоже на то, что существует чудесное решение для присоединения div к окну просмотра, и иметь возможность прокручивать по горизонтали. Я начинаю щедрость, если кто-то столкнулся с этой проблемой раньше и нашел хорошее решение.

Спасибо, что люди, которые уже пытались ответить на этот вопрос, не так просты, как кажется проблематичным;)

ОТВЕТЫ

Ответ 1

Вы можете обернуть элемент статическим позиционированным 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:

http://jsbin.com/efuya3

Ответ 2

Вы можете создать фиктивный видимый: скрытый элемент с той же шириной, что и позиция: фиксированный элемент. Вот пример:

<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>

Ответ 4

вы можете создать обертку div, а затем указать ширину в div

например, ширина: 150%; или ширины; 2000px;

в зависимости от ваших требований

зачем вам нужно прокручивать?