CODEWITHSUNDEEP
javascriptjquerycss
Cerin
Cerin

Reputation: 64719

Fixed horizontal position but allowing vertical scroll with jQuery

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).

Upvotes: 3

Views: 3714

Answers (3)

scorpdaddy
scorpdaddy

Reputation: 303

Would you be able to use 2 divs to group the 2 kinds of content? The first div has float: left property and holds the left side elements. The second div flows to the right of the first div and is allowed to scroll with its contents.

Upvotes: 0

Cerin
Cerin

Reputation: 64719

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>

Upvotes: 1

justbeez
justbeez

Reputation: 1387

I'm not 100% certain about the question you're asking, so feel free to correct me if I'm wrong about this and I'll try to provide additional assistance.

I think you might want to look into a pure CSS method for doing this, using position: fixed; and applying the left attribute in the distance you want the label to appear from the left side of the screen. If you don't set the top or bottom attributes, it should stay where it is vertically but its horizontal position will always be based on the user's viewport (if you haven't used position: fixed;, it's very much like position: absolute; but always tied to the user's viewport).

Now, there is one small caveat: position: fixed; isn't supported in very old versions of Internet Explorer (IE 5-6), but is supported in IE7 (although IE7 does have a couple bugs that you'll want to learn). For more information on compatibility, check out this page on QuirksMode and the compatibility tables on the same site: http://quirksmode.org/css/position.html

Hope that helps!

Upvotes: 0

Related Questions