2012-02-23 10 views
3

特定の要素の水平位置が固定され、可変の垂直位置が可能になるためのjQueryプラグインまたは他のJSライブラリがありますか?水平位置は固定されていますが、jQueryで垂直スクロールが可能です

私はかなり広い表形式を持ち、フォームの各行にはラベルが付いています。ユーザーが水平方向にスクロールすると、ラベルが常に表示されるようにラベルを修正して、ユーザーが作業中の行をすばやく特定できるようにしたいと考えています。

私は、逆のことを行ういくつかの例(すなわち、水平方向のスクロールを許可している間は固定の垂直位置、ScrollToFixed)を見つけたにもかかわらず、ほとんど成功していませんでした。

答えて

1

私のアプリケーションでは、現在のスクロール位置に比例してleft CSS属性を更新するだけで済みました。

<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> 
0

あなたが求めている質問について100%確信しているわけではありませんので、私がこれについて間違っている場合は私を修正してください。私は追加の支援を提供しようとします。

position: fixed;を使用し、画面の左側からラベルを表示する距離にleft属性を適用すると、これを行うための純粋なCSSメソッドを調べるとよいでしょう。上部または下部の属性を設定しない場合は、垂直方向の位置に留まりますが、水平位置は常にユーザーのビューポートに基づいています(position: fixed;を使用していない場合は、position: absolute;に非常に似ていますが、ユーザーのビューポート)。

position: fixed;は非常に古いバージョンのInternet Explorer(IE 5-6)ではサポートされていませんが、IE7ではサポートされています(IE7にはいくつかのバグがあります学ぶ)。互換性の詳細については、QuirksModeのこのページと同じサイトの互換性表を参照してください。 http://quirksmode.org/css/position.html

0

はあなたがグループにコンテンツの2種類を2つのdivタグを使用することができるだろう:私は、次のJSを使用して、これをしませんでしたか?最初のdivはfloat:leftプロパティを持ち、左側の要素を保持します。 2番目のdivは最初のdivの右側に流れ、その内容でスクロールすることができます。

関連する問題