固定水平位置，但允许使用jQuery进行垂直滚动

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%确定你问的问题，所以如果我错了，请随时纠正我，我会尝试提供额外的帮助。

我认为您可能希望研究一种纯CSS方法来实现这一点，使用position: fixed;并在您希望标签从屏幕左侧出现的距离内应用left属性。如果不设置顶部或底部属性，它应该停留在垂直位置，但其水平位置将始终基于用户的视区(如果您没有使用过position: fixed;，它非常类似于position: absolute;，但始终绑定到用户的视区)。

现在，有一个小小的警告:在非常老的IE版本(IE5-6)中不支持position: fixed;，但在IE7中支持(尽管IE7确实有一些你想要学习的bug)。有关兼容性的更多信息，请查看QuirksMode上的页面和同一站点上的兼容性表：http://quirksmode.org/css/position.html

希望这能有所帮助！

Answer 3

你能使用2个div来组合这2种内容吗？第一个div具有float: left属性并保存左侧元素。第二个div位于第一个div的右侧，允许滚动其内容。