代码之家 › 专栏 › 技术社区 › Michael Lumbroso

模拟position:fixed in jQuery查询

fixed position scroll jquery

Michael Lumbroso · 技术社区 · 16 年前

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 . 第一张桌子有 ,另一个使用我的代码。如果有解决办法的话,这就是我试图避免的跳跃效应。

编辑 :

仍然没有找到一个令人满意的解决方案,我想我会用这个在最后,因为该网站是用来在IE上,它似乎不是一个奇迹般的解决方案存在附加一个div到视口,并能够水平滚动。我开始悬赏,以防有人以前遇到这个问题,并找到了一个好的解决办法。

4 回复 | 直到 16 年前

David Hellsing 16 年前

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

jerjer 16 年前

你可以创建一个虚拟visibililty:hidden element 宽度与position:fixed element. 以下是一个示例:

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