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

Posted 2023-02-25

【中文标题】固定水平位置，但允许使用 jQuery 进行垂直滚动

【英文标题】：Fixed horizontal position but allowing vertical scroll with jQuery

【发布时间】：2012-02-23 21:49:37

【问题描述】：

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

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

尽管我发现了一些相反的例子（即固定垂直位置同时允许水平滚动，如ScrollToFixed），但我的搜索并没有取得多大成功。

【参考方案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>

【参考方案2】：

我不能 100% 确定您提出的问题，因此，如果我对此有误，请随时纠正我，我会尽力提供更多帮助。

我认为您可能希望研究一种纯 CSS 方法来执行此操作，使用 position: fixed; 并在您希望标签从屏幕左侧出现的距离处应用 left 属性。如果您不设置顶部或底部属性，它应该保持垂直位置，但其水平位置将始终基于用户的视口（如果您没有使用position: fixed;，它非常类似于position: absolute;，但是始终与用户的视口相关联）。

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

希望有帮助！

【参考方案3】：

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