Question

我有一个大于页面宽度的标题，因此我无法使用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附加到视口的奇迹解决方案，并能够水平滚动。如果有人遇到这个问题之前我找到一个很好的解决方案，我就会开始赏金。

感谢那些已经尝试回答这个问题的人并不像看起来那么简单问题;）

Answer 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

Answer 2

您可以创建虚拟可见性：隐藏元素，其宽度与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>

Answer 3

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

试试这个：）

Answer 4

你可以创建一个包装div，然后在div上指定一个宽度

例如宽度：150％; 或宽度; 2000像素;

取决于您的要求

为什么需要滚动？

模拟位置：在jQuery中修复

4 个答案: