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

模拟position:fixed in jQuery查询

fixed position scroll jquery

Michael Lumbroso · 技术社区 · 15 年前

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 回复 | 直到 15 年前

David Hellsing 15 年前

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

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

Hailwood 15 年前

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

Hailwood 15 年前

或宽度;2000像素;

根据您的要求

为什么需要滚动?

推荐文章

Zaeni Ahmad · 如何制作中央全屏加载程序

1 年前

SilvarCraw · 如何使用Bootstrap 3使按钮保持在右侧顶部屏幕上,并保持移动响应?

7 年前

Mario Vernari · “固定”元素上移动的视口宽度问题

7 年前

ADH - THE TECHIE GUY · 是否有可能以像素为单位设置一个部分的宽度,以百分比为单位设置其余部分的宽度而不丢失其响应性?

8 年前

D3SIGN3R · CSS在FireFox中的固定位置,无重叠

10 年前

Joe Borg · 页眉Div位置固定在页面顶部,但加载时会在页面顶部显示一个Div

10 年前

lena · Bootstrap 3将导航栏固定在顶部-滚动时变小

11 年前

Joseph Montecalvo · Jquery-使背景图像以100%高度旋转

11 年前

user3288440 · 从滚动定义固定位置

11 年前

Paul Designer · 固定收割台,卡在主固定收割台下方

11 年前