Question

Is there a jQuery plugin, or other JS library, for making certain elements have a fixed horizontal position, while allowing a variable vertical position?

I have a rather wide tabular form, and each row in the form has a label. When the user scrolls horizontally, I’d like to fix the label to the left-hand side so that its always visible, allowing the user to quickly identify the row they’re working on.

I’ve searched without much success, even though I’ve found a few examples of doing the opposite (i.e. fixed vertical position while allow horizontal scrolling as in ScrollToFixed).

Answer 1

For my application, I found all I needed to do was update the left CSS attribute proportional to the current scroll position. I did this using the following 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>