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。第一个表是 with position:fixed，另一个使用我的代码。如果有解决方案，这就是我试图避免的跳跃效应。

编辑：

仍然没有找到令人满意的解决方案，我想我最终会使用它，因为该站点旨在在 IE 上使用，并且似乎不存在将 div 附加到视口的奇迹解决方案，并且能够水平滚动。如果有人以前遇到过这个问题并找到了一个好的解决方案，我会开始赏金。

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

4

4 回答 4

8

您可以使用静态定位的 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

于 2010-07-19T11:07:29.370 回答
3

您可以创建一个与 position:fixed 元素宽度相同的虚拟 visibilty:hidden 元素。这是一个示例：

<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>
于 2010-07-07T08:30:20.773 回答
1

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

试试这个:)

于 2010-07-08T04:08:48.123 回答
0

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

例如宽度：150%；或宽度；2000像素；

根据您的要求

为什么需要滚动？

于 2010-07-07T08:00:53.123 回答