Имитация позиции: исправлено в jQuery - PullRequest
Новая
       47

Имитация позиции: исправлено в jQuery

13 голосов
/ 07 июля 2010

У меня есть заголовок, который больше ширины страницы, поэтому я не могу использовать 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, и не похоже, что существует чудо-решение, чтобы прикрепить div к области просмотра и иметь возможность прокрутки по горизонтали.Я начинаю вознаграждение в случае, если кто-то сталкивался с этой проблемой раньше и нашел хорошее решение.

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

Ответы [ 4 ]

9 голосов
/ 19 июля 2010

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

4 голосов
/ 07 июля 2010

Вы можете создать фиктивный элемент visibililty: скрытый с той же шириной, что и элемент 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>
2 голосов
/ 08 июля 2010

http://fixedheadertable.com/demo/multipletablesdemo.html

Попробуйте вместо этого:)

1 голос
/ 07 июля 2010

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

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

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

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

...