在jQuery中模拟position：fixed

Question

在jQuery中模拟position：fixed

12

我的页眉比页面的宽度还要大，所以我不能使用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上使用，并且似乎不存在能够将

附加到视口并能够水平滚动的神奇解决方案。如果有人以前遇到过这个问题并找到了好的解决方案，我将开启一项赏金。

感谢那些已经尝试回答这个不简单的问题的人们 ;)

- Michael Lumbroso

我不明白你想做什么。你能再解释一下吗？ - Unicron

我想要一个 position:fixed，但只是垂直的，也就是说我需要水平滚动，而这是 position:fixed 不允许的。 - Michael Lumbroso

4个回答

3

您可以创建一个虚拟的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>

- jerjer

很好，这看起来正好是我所需要的，我正在测试它，如果可以的话，我会接受它。非常感谢，我在网上寻找了很久一个合适的解决方案，但只有最好的程序员网站才能提供正确和最好的答案；) - Michael Lumbroso

嗯，很奇怪，在FF上好像行不通：请参见http://jsbin.com/awawa3你能解释一下吗？谢谢。 - Michael Lumbroso

我提供的链接在你的FF 3.6上能用吗？很奇怪，我也有这个问题，如果我水平滚动，它的行为就像简单的position:fixed。在IE7/8上更糟糕，因为它的行为就像position:absolute。不知道可能是什么问题。 - Michael Lumbroso

1

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

试试这个吧 :)

- Hailwood

嘿，感谢您的建议，但我已经看过了这个，它和我的期望不太相符，因为滚动条在主体上，而我需要用右侧的滚动条来滚动，因为我已经没有足够的空间来显示所有列。我想我会实现你之前的解决方案或jerjer的解决方案，因为这是一家公司的软件，所以他们不会很快从Internet Explorer转变，不幸的是 :s - Michael Lumbroso

0

你可以创建一个包装 div，然后在该 div 上指定宽度。例如：width: 150%; 或 width: 2000px; 根据您的需求而定。为什么需要滚动呢？

- Hailwood

这是我的固定位置的线程。这是一个有20列的表格，我有隐藏某些列的能力，但当我需要查看全部时，我需要水平滚动并查看所有列标题。我正在测试您的解决方案，我会回复您的。 - Michael Lumbroso

很遗憾，这不起作用。将固定元素的宽度设置为一个位置并不能允许水平滚动。我会尝试制作一个示例来准确展示我现在的情况以及我的解决方案存在的问题。无论如何，感谢回答;) - Michael Lumbroso

我可能错了，但是，您想要页眉固定在页面顶部，但是当您向左/右滚动时，它应该只滚动，以便您可以看到其他列？我可能错了，但请尝试这个 http://jsbin.com/eyuya/4 - Hailwood

谢谢你的回答，看起来它只能在IE上运行，我不知道为什么。如果它能兼容FF就完美了。 - Michael Lumbroso

是的，不幸的是Firefox的JavaScript引擎在返回滚动事件方面有些滞后，这就是为什么它看起来会跳跃的原因。 - Hailwood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Hellsing · Accepted Answer

你可以通过用一个静态定位的 DIV 包装元素来获取滚动条，然后监听 window 的滚动事件，并根据滚动条的 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