固定的水平位置，但允許與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;，但始終與用戶的視口）。

現在，有一個小警告：position: fixed;在Internet Explorer（IE 5-6）的非常舊版本中不受支持，但在IE7中受支持（儘管IE7確實有一些您想要的錯誤學習）。有關兼容性的更多信息，請查看QuirksMode上的此頁以及同一網站上的兼容性表格： http://quirksmode.org/css/position.html

希望有所幫助！

Answer 3

你能夠使用2個div來分組的2種內容？第一個div具有float：left屬性並擁有左側元素。第二個div流向第一個div的右側，並允許滾動其內容。