Question

是否有jQuery插件或其他JS库，用于使某些元素具有固定的水平位置，同时允许可变的垂直位置？

我有一个相当宽的表格形式，表格中的每一行都有一个标签。当用户水平滚动时，我想将标签固定在左侧，以便它始终可见，允许用户快速识别他们正在处理的行。

我搜索得不太成功，尽管我找到了一些相反的例子（即固定垂直位置，同时允许水平滚动，如ScrollToFixed）。

Answer 1

对于我的应用程序，我发现我需要做的就是更新与当前滚动位置成比例的left CSS属性。我使用以下JS做到了这一点：

<script language="javascript" src="jquery-1.4.3.js"></script>
<script language="javascript" src="jquery.inview.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function($){

            // Record initial positions of all elements.
            $('<pattern>').each(function(i){
                var el = $(this);
                var offset = el.offset();
                el.attr('_left', offset.left);
                el.attr('_top', offset.top);
            });

            // Detect when elements become visible.
            $('<pattern>').bind('inview', function (event, visible) {
                var el = $(this);
                if (visible == true){
                    el.addClass('_fixed_label');
                } else {
                    el.removeClass('_fixed_label');
                }
            });

            // Update elements when the scroll position changes.
            $(window).scroll(function(event) {
                var x = $(this).scrollLeft();
                $('<pattern>._fixed_label').each(function(i){
                    var el = $(this);
                    el.css('left', x);
                });
            });

        });
    })(jQuery);
</script>

Answer 2

我对你提出的问题并不是100％肯定，所以如果我对此有误，请随时纠正我，我会尽力提供额外帮助。

我想您可能想要使用position: fixed;来查看纯CSS方法，并在希望标签从屏幕左侧出现的距离中应用left属性。如果你没有设置顶部或底部属性，它应该保持在垂直位置，但它的水平位置将始终基于用户的视口（如果你没有使用position: fixed;，它就像{{ 1}}但总是绑定到用户的视口。）

现在，有一个小警告：在非常旧版本的Internet Explorer（IE 5-6）中不支持position: absolute;，但在IE7中受支持（尽管IE7确实有一些错误，你可以'我想学习）。有关兼容性的更多信息，请查看QuirksMode上的此页面以及同一站点上的兼容性表： http://quirksmode.org/css/position.html

希望有所帮助！

Answer 3

您是否可以使用2个div对2种内容进行分组？第一个div有float：left属性并保存左侧元素。第二个div流向第一个div的右侧，并允许滚动其内容。

修复了水平位置但允许使用jQuery进行垂直滚动

3 个答案: